CSS Tarayıcı Uyumluluğu Sorunu  CSS Tarayıcı Uyumluluğu Sorunu | Googleda Görüntüle

CSS Tarayıcı Uyumluluğu Sorunu
 BEĞEN
  YORUM YAP

WallpaperPlay | Ücretsiz HD Masaüstü ve Mobil Wallpaper Duvar Kağıdı

HTML - CSS ile uğraşan her arkadaşımızın baş belası olan tarayıcı uyumluluğuna bir js dosyası ile çözümün nasıl olabileceğini anlatacağım.
Ben bu yazımda bize en çok problem çıkartan ie (internet explorer) üzerinde işlem gerçekleştireceğim.

Öncelikle Eklentimizi İndirelim

CSS tarayıcı uyumluluk sorununda bize olanak sağlayacak eklentiyi rar olarak buraya tıklayarak indirebilirsiniz.
Ya da buraya tıklayarak GitHub üzerinden projeye erişebilirsiniz.

Eklentimizi indirdiğimize göre anlatımımıza başlayalım.

İşlemimize başlamadan önce eklentimizi sayfamıza çağrıyoruz.


JS Dosyamızı çağırdık şimdi küçük bir örnekle konuyu anlatalım.
Bir nesnemiz var ve bu nesne tüm tarayıcılarda düzgün bir şekilde çalışıyor.Fakat internet explorer'da 5 pixell ileri kaymış olarak gözüküyor ve hiçbir şekilde bir komut dinlemiyor.Bu durumda eklentimiz ile bu olaya müdahele edeceğiz.Aşağıda ki kodla olayı çözmüş oluyoruz;

.ie .nesnemiz{ margin-left:-5px; }

Peki Burada Ne Yaptık ?

Tüm tarayıcılarda düzgün çalışıp internet explorer da 5 pixell ileri kayan nesnemizi margin-left komutuyla 5 pixell geriye aldık.Bu durumda nesnemiz tüm tarayıcılarda düzgün bir şekilde çalışmış oldu vede bu işlem sadece sadece intenet explorer için geçerli oldu.
Sadece explorer'a özel olmasını sağlamak için css tagımızın başına .ie classını ekledik.Aşağıda mevcut tarayıcıları listeledim, örneğin nesnemiz tüm tarayıcılarda düzgün çalışıp opera'da 5 pixell ileri kaymış olarak çıksaydı .opera .nesnemiz{ margin-left:-5px; } diyecektik.

Bu eklentinin bize sağladığı bir diğer güzellik ise dilersek hem istediğimiz işlem sistemini hemde istediğimiz tarayıcıda işlem yapabiliyoruz.
Bunu örnekle açıklamak gerekirse;

.mac.opera .nesnemiz{ font-weight: bold; }

Yaptığımız işlem; mac'de opera tarayıcısını ele alarak nesnemize font-weight:bold; komutu vererek fontumuzu kalınlaştırmış olduk ve bu işlem sadece mac'de opera tarayıcısında oldu.Yani windows işletim sisteminden operaya girersek karşımıza varsayılan kodumuzun özelliklerini göreceğiz.

Son olarak bu eklenti hangi tarayıcılar ve sistemlerde çalışır bunuda görelim.

Mevcut Tarayıcılar

  • ie - Internet Explorer (All versions)
  • ie8 - Internet Explorer 8.x
  • ie7 - Internet Explorer 7.x
  • ie6 - Internet Explorer 6.x
  • ie5 - Internet Explorer 5.x
  • gecko - Mozilla, Firefox (all versions), Camino
  • ff2 - Firefox 2
  • ff3 - Firefox 3
  • ff3_5 - Firefox 3.5
  • ff3_6 - Firefox 3.6 new
  • opera - Opera (All versions)
  • opera8 - Opera 8.x
  • opera9 - Opera 9.x
  • opera10 - Opera 10.x
  • konqueror - Konqueror
  • webkit or safari - Safari, NetNewsWire, OmniWeb, Shiira, Google Chrome
  • safari3 - Safari 3.x
  • chrome - Google Chrome
  • iron - SRWare Iron

Hangi Sistemlerde Çalışır 

  • win - Microsoft Windows (all versions)
  • vista - Microsoft Windows Vista new
  • linux - Linux (x11 and linux)
  • mac - Mac OS
  • freebsd - FreeBSD
  • ipod - iPod Touch
  • iphone - iPhone
  • ipad - iPad new
  • webtv - WebTV
  • j2me - J2ME Devices (ex: Opera mini) changed from mobile to j2me
  • blackberry - BlackBerry new
  • android - Google Android new
  • mobile - All mobile devices new 

Bu güzel eklentinin yazarı Rafael Lima'ya teşekkürlerimi sunarak anlatımımı bitiriyorum.

Etiketler

Yorumlar

Bu Konuya Ait 2 Onaylı Yorum Bulunuyor.

Korhan

Korhan

  3 ay önce

Hocam öncelikle tesekkür ederim ama bu kodu nereye koyacagiz stil dosyamiza mi .ie .nesnemiz{ margin-left:-5px; }

Emre Ceyhan

Emre Ceyhan | Admin

  2 ay önce

Evet

Misafir

Misafir

  1 ay önce

hocam bilgi için teşekkürler

Yorum Yap

CSS3 -webkit / -moz / -o Nedir ? CSS3 ve Tarayıcı İlişkisi

Belki daha önce karşılaşmız olabilirsiniz.Bazı CSS3 kodları birkaç defa aynı yazılıp baş...

  616   2 gün önce

CSS3 Geçiş Efektleri - Transition Nedir? Nasıl Kullanılır?

Merhaba arkadaşlar, çoğu sitelerde gördüğümüz daha yumuşak ve animasyonlu şekilde geçiş ...

  345   1 hafta önce

3. İndir.com Mobil Uygulama Yarışması ABD'ye Götürüyor

İNDİR.COM MOBİL UYGULAMA YARIŞMASI ABD’ YE GÖTÜRÜYOR Geçtiğimiz ik...

  852   11 ay önce

CSS [ text-transform:uppercase ] Karakter Sorunu Çözümü

Css'de metin (text) biçimlendirme özelliklerinden biri olan text-transform:uppercase parametresini...

  3059   1 yıl önce

Mesut Hocaoglu 1 hafta önce demiş ki;


İnternet ortamında " bu işin piriyim " diye geçinenlere nazaran kısa ve açıklayıcı anlatım...
Yoruma Git

Kutay Erten 1 hafta önce demiş ki;


Kardeşim seni tebrik ediyorum bu kadar kısa bir kodu uzun uzun anlatmışşın , renk geçişleri...
Yoruma Git

Abdullah 1 hafta önce demiş ki;


Teşekkürler:)
Yoruma Git

Ahmet Altınkaynak 3 hafta önce demiş ki;


Site içeriğini ve samimi cevaplarınızı çok takdir ettim. Bilgiler çok işime yarıyor Teşekk...
Yoruma Git