SLOGAN ARŞİVİ
23 Temmuz 2015
Cross-Browser
28 Temmuz 2015

Tarayıcı Uyumluğu

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;

1
.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;

1
.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.