Jan.01

CSS Browser Selector

Web tasarım işi ile uğraşanların en büyük sıkıntısı CSS kodlarının her tarayıcıda, hatta aynı tarayıcının farklı versiyonlarında bile değişik yorumlanması sonucunda tasarımcıyı çıldırtmasıdır.

Güncellemeler

02 Kasım 2010 (v0.4.0)

Bir sayfa tasarlamaya başladığımızda favori kullandığımız tarayıcı ile tasarlarız. W3C standartlarına uygun tasarladığımız sayfalar bile bazı tarayıcılarda sorunlu görünmektedir. Bunun sebebi CSS stil kodlarının yorumlanmasının tarayıcıdan tarayıcıya farklılık göstermesidir. Tasarımcılar bu sorunu her tarayıcı için farklı CSS stilleri yazarak çözmeye çalışırlar. Bu yöntemlerin genel adına CSS Hack denir.

CSS Hack işlemleri sırasında hazırladığımız CSS stillerini farklı dosyalarda tutmak, her tarayıcı için farklı yöntemler, comment’ler uygulamak bazen sıkıcı ve karışıklık meydana getirebilir.

Başlıkta bahsettiğimiz Rafael Lima tarafından yazılan ve Creative Commons lisansla dağıttığı bu JavaScript kod ile CSS Hack işlemleri çok daha kolay hale getirilmiş.

CSS Browser Selector JS koduna resmi sitesinden ulaşabilir, örnekleri görebilirsiniz.

Kodun kullanımı çok basit, yapmanız gereken JS kodu sayfanıza çağırmak ve yazacağınız CSS kodlarında kullanılacak tarayıcı ve işletim sistemleri belirlemek.

Kodu sayfanıza eklemek ;

<head> </head> tagları arasında herhangi bir yere aşağıdaki kodu eklemeniz yeterli ;

<script src="css_browser_selector.js"></script>
CSS içinde kullanımı ;
html.gecko div#header { margin: 1em; }
.opera #header { margin: 1.2em; }
.ie .mylink { font-weight: bold; }
.mac.ie .mylink { font-weight: bold; }
.[os].[browser] .mylink { font-weight: bold; } /* .[os] ile .[browser] arasında boşluk yok */
Kullanılabilen İşletim Sistemi Kodları ;

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

Kullanılabilen Tarayıcı Kodları ;

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
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
opera – Opera (Tüm Sürümler)
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

Diğer dillerde benzer CSS seçicileri ;

Ruby on Rails Plugin by Reid MacDonald

PHP CSS Browser Selector by Bastian Allgeier

WordPress Plugin by Adrian hanft

PHP,JavaScript,Yazılım
Share this Story:
  • facebook
  • twitter
  • gplus

About Muzaffer Ali AKYIL

Merhabalar, Adım Muzaffer Akyıl, Bilgi teknolojileri ile içli dışlı, teknolojiyi yakından takip eden, web ve masaüstü programlama ile uğraşıp, saatlerce kastığı şeyleri hiç bir karşılık beklemeden paylaşmayı amaç eden biriyim.


Yorumlar(3)

  1. özgün
    2633 days önce

    yıllardır kullandığım bir javascript. İşinizi çok kolaylaştırıyor bazen. Javascripti açık olmayan tarayıcılarda çalışmaz ama çokta önemli değil. Javascripti açık olmayan vatandaş girmesin zaten siteye. Hatta bilgisayarını ve kendini pencereden aşağıya atsın :)

  2. sadık
    1890 days önce

    Bunun css teki her tarayıcı için ayrı kod yada ön ek yazmadan ne farkı var anlamadım.

  3. Trackback: Anonim

Bir yorum bırak

 

Comment