Bu basit JavaScript fonksiyonunun yaptığı iş sadece tarayıcı UA’yı alıp HTML tagine class olarak atamak.
Kod:
/*css_browser_selector*/
function css_browser_selector(e){
var t = e.toLowerCase(),
r = function (e){
return t.indexOf(e) > -1;
},
o = "webkit",
s = document.documentElement,
n = [
!/opera|webtv/i.test(t) && /msie\s(\d)/.test(t)
? "ie ie" + RegExp.$1
: r("gecko/")
? "gecko"
: r("chrome")
? o + " chrome"
: r("applewebkit/")
? o + " safari"
: ""
];
return (c = n.join(" ")), (s.className += " " + c), c;
}
css_browser_selector(navigator.userAgent);
s=document.documentElement sayfanın <html> tagini belirtmekte.
Buradan test edebilirsiniz:
Aslında bu iş için birçok farklı framework var ancak eğer sadece tarayıcıları ayırmak için bir class atamak ise o büyük büyük frameworklere hiç gerek yok. Ben sadece Chrome tabanlı(webkit tümü + Safari) ile Firefox(gecko) arasında ayrıştırmayı yaptım(mobil webkit ise safari ekliyor), dilerseniz geliştirebilirsiniz ama CSS için ne kadar gerekli ve zaten bunu yapan bir sürü JS framework vardır fazlası için onları kullanmak gerek. Benim tasarladığım web sitesinde sadece Chrome tabanlı tarayıcılarla Firefox tarayıcısını ayırmak gibi bir derdim vardı ve bu şekilde çözdüm, Firefox ile Chrome tabanlı tarayıcıların CSS noktasında gün geçtikçe azalmış olsa da hâlâ destek farklılıkları bulunmakta, çoğunu CSS’de @supports yöntemi ile çözebiliyor olsanız da bazı durumlarda bu yeterli olmuyor.
Kolay gelsin.