Site-Tarayici-Uyumu
Sitelerimizi her tarayıcı için uyumlu hale getirmek için göz önünde bulunduracağımız diğer bir maddede, CSS tarayıcı seçici kullanmak.
CSS tarayıcı seçici ( CSS Browser Selector) ne işe yarar?
Siteyi oluştururken tüm stilleri sıfırladık ve kullanıma uygun hale getirdik. Fakat kendi oluşturmuş olduğumuz css kodları yinede farklı tarayıcılarda farklı sonuçlar verebilmektedir. Bu gibi durumlarda imdadımıza CSS Browser Selector yetişiyor ve her tarayıcı için ayrı ayrı style tanımlamaları yapabilmemizi sağlıyor.
Nasıl Kullanılır ?
Öncelikle buradan indireceğiniz css_browser_selector.js (v0.3.4 - 29 eylül 2009) javascript dosyasını, sitenizin dosyaları içine atınız.
Daha sonra web sayfanızın;
<head>
...
</head>
etiketleri arasına,
<script src="css-browser.js" type="text/javascript"></script>
kodlarını yapıştırın. Böylece sayfanıza kullanacağımız javascript kütüphanesini yüklemiş oluyoruz…
Artık tek yapmamız gereken CSS bloklarımızı oluştururken, bloğun başında tarayıcı kodunu yazmak.
Basit bir örnekle açıklayalım…
.kutu { border:1px solid #F00; background:#999; padding:5px; }
.ie .kutu { padding:10px; }
.chrome .kutu { border:4px solid #F00; }
Yukarıdaki css kodlarını incelediğimizde, kutu isminde bir class’ımız var.
İlk satırdaki kod bize şunu anlatıyor, bu class’ı atadığımız div’ler kırmızı 1 piksel kenarlıklı, gri zeminli ve 5 piksel iç kenar boşluklu şekilde görünecek. Bu tüm tarayıcılar için geçerlidir.
İkinci satırı incelersek, internet explorer’da kutu class’ı atanmış bu div yukarıdaki özellikleri taşımasının yanı sıra iç kenar boşlukları 5 piksel değilde 10 piksel olacağını görüyoruz.
Üçüncü satırda ise Chrome tarayıcısında kenarlığın 4 piksel genişliğinde olması belirtilmiştir.
İşte kullanabileceğiniz kodlar ;
İşletim Sistemleri ;
- win » Microsoft Windows
- linux » Linux (x11 ve linux)
- mac » Mac OS
- freebsd » FreeBSD
- ipod » iPod Touch
- iphone » iPhone
- webtv » WebTV
- mobile » J2ME Devices (örn: Opera mini)
Tarayıcılar ;
- ie » Internet Explorer (Tüm versiyonları)
- ie8 » Internet Explorer 8.x
- ie7 » Internet Explorer 7.x
- ie6 » Internet Explorer 6.x
- ie5 » Internet Explorer 5.x
- gecko » Mozilla, Firefox (Tüm versiyonları), Camino
- ff2 » Firefox 2
- ff3 »Firefox 3
- ff3_5 » Firefox 3.5
- opera » Opera (Tüm versiyonları)
- opera8 » Opera 8.x
- opera9 » Opera 9.x
- opera10 » Opera 10.x
- konqueror » Konqueror
- webkit veya safari » Safari, NetNewsWire, OmniWeb, Shiira, Google Chrome
- safari3 » Safari 3.x
- chrome » Google Chrome
- iron » SRWare Iron