Css Browser Selector Kullanımı
Css

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);
Yararlı olması dileÄŸiyle. GörüÅŸmek üzere...


author

Aykut ErdoÄŸan

browser selector, css, javascript

  • Bu Yazılara da Gözat:

    0 Yorum

    Cevapla