Css Browser Selector Kullanımı

Merhaba arkadaşlar. Bu yazımda sizlere Css Browser Selector'dan bahsedeceğim. Css kodlarını her tarayıcının farklı yorumlaması bu işlerle uğraşan kişilerin en büyük sıkıntısıdır ve bu sıkıntıyı aşmak adına Rafael Lima isimli arkadaşımızın yazmış olduğu Browser Selector'ı kullanacağız. Browser Selector için küçük bir javascript kütüphanesi yakıştırması yapabiliriz. Css kodlarımızı kullandığımız tarayıcıyı baz alarak yazmaya başlarız. Diğer tarayıcılarda oluşan farklılıkları Browser Selector ile düzenleriz. Hemen örnek bir css kodu yazalım ve kullandığımız classların anlamlarına bakalım.

<script src="css_browser_selector.js"></script>

.chrome #tamamla {top:39px;}

.ie #tamamla {top:39px;}

.safari #tamamla {top:39px;}

Burada tamamla id'li divimizin Chrome'da, İnternet Explorer'da ve Safari'de aynı görünmesi adına top değerlerini 39'a eşitledim. Ben firefox kullandığım için bu tarayıcıyı baz aldım. Daha iyi kavrayabilmeniz adına bir örnek daha verelim.

<div id="divimiz">Bu alan sadece Mac'lerde görünecektir!</div>

<script src="css_browser_selector.js"></script>

#divimiz {display:none;}

.mac #divimiz {display:block;}

Divimiz id'li divimiz sadece Mac Os işletim sistemli bilgisayarlarda görüntülenecektir. Şimdi tüm classlarımızı yazalım.

İşletim Sistemi Kodlarımız:
mac – Mac OS
win – Microsoft Windows
vista – Microsoft Windows Vista
linux – Linux (x11 ve linux)
android – Google Android
freebsd – FreeBSD
iphone – iPhone
webtv – WebTV
j2me – J2ME Devices (ex: Opera mini)
ipod – iPod Touch
mobile – J2ME Devices (ör: Opera mini)
blackberry – BlackBerry
mobile – Tüm mobil cihazlar

Tarayıcı Kodlarımız:
gecko – Mozilla, Firefox (Tüm Sürümler), Camino
ff2 – Firefox 2
ff3 – Firefox 3
ff3_5 – Firefox 3.5
ff3_6 – Firefox 3.6
webkit or safari – Safari, NetNewsWire, OmniWeb, Shiira, Google Chrome
safari3 – Safari 3.x
opera – Opera (Tüm Sürümler)
opera8 – Opera 8.x
opera9 – Opera 9.x
opera10 – Opera 10.x
konqueror – Konqueror
chrome – Google Chrome
iron – SRWare Iron
ie – Internet Explorer (Tüm Sürümler)
ie8 – Internet Explorer 8.x
ie7 – Internet Explorer 7.x
ie6 – Internet Explorer 6.x
ie5 – Internet Explorer 5.x
ie1 – Internet Explorer (Sonradan eklendi)
ie11 – Internet Explorer (Sonradan eklendi)

Css_browser_selector.js Düzenlenmiş Hali

function css_browser_selector(u) {

    var ua = u.toLowerCase(),

        is = function (t) {

            return ua.indexOf(t) > -1

        }, g = 'gecko',

        w = 'webkit',

        s = 'safari',

        o = 'opera',

        m = 'mobile',

        h = document.documentElement,

        b = [(!(/opera|webtv/i.test(ua)) && /msies(d)/.test(ua)) ? ('ie ie' + RegExp.$1) :

             is (!(/opera|webtv|firefox/i.test(ua))&&/trident|msie/i.test(ua)&&/(msies|rv:)(d+)/.test(ua))?('ie ie'+(/trident/4.0/.test(ua) ? '8' : RegExp.$2)):

             is('firefox/2') ? g + ' ff2' :

             is('firefox/3.5') ? g + ' ff3 ff3_5' :

             is('firefox/3.6') ? g + ' ff3 ff3_6' :

             is('firefox/3') ? g + ' ff3' :

             is('trident/7.0') ? ' ie11' :

             is('gecko/') ? g :

             is('opera') ? o + (/version/(d+)/.test(ua) ? ' ' + o + RegExp.$1 : (/opera(s|/)(d+)/.test(ua) ? ' ' + o + RegExp.$2 : '')) :

             is('konqueror') ? 'konqueror' :

             is('blackberry') ? m + ' blackberry' :

             is('android') ? m + ' android' :

             is('chrome') ? w + ' chrome' :

             is('iron') ? w + ' iron' :

             is('applewebkit/') ? w + ' ' + s + (/version/(d+)/.test(ua) ? ' ' + s + RegExp.$1 : '') :

             is('mozilla/') ? g : '', is('j2me') ? m + ' j2me' :

             is('iphone') ? m + ' iphone' :

             is('ipod') ? m + ' ipod' :

             is('ipad') ? m + ' ipad' :

             is('mac') ? 'mac' :

             is('darwin') ? 'mac' :

             is('webtv') ? 'webtv' :

             is('win') ? 'win' + (is('windows nt 6.0') ? ' vista' : '') :

             is('freebsd') ? 'freebsd' : (is('x11') || is('linux')) ? 'linux' : '', 'js'];

    c = b.join(' ');

    h.className += ' ' + c;

    return c;

};

css_browser_selector(navigator.userAgent);