CSS Browser Selector

Muzaffer Ali AKYIL — Thu, 08 Apr 2010 08:27:42 +0000

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 ;

tagları arasında herhangi bir yere aşağıdaki kodu eklemeniz yeterli ;

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

Transcorners (Yuvarlak Köşeler)

Muzaffer Ali AKYIL — Fri, 25 Jan 2008 14:55:01 +0000

Mootools kullanarak hazırlanmış olan Transcorners sayesinde kolay ve hızlı bir şekilde köşeler oluşturabilirsiniz. İstediğiniz köşeye istediğiniz açıda ve renkte köşeler oluşturmanıza izin veren Transcorners background-image ve 1px’den fazla kalınlığı desteklememeklte. Sadece 4KB transcorners.js’i buradan örneklerine buradan bakabilirsiniz.

Muzaffer AKYIL (Victorious) » JavaScript