Seçici Hackleri (Selector Hacks)

IE6 ve alt sürümleri

* html #test  { color: red }

IE7

*:first-child+html #test { color: red }

IE7, FF, Saf, Opera

html>body #test { color: red }

IE8, FF, Saf, Opera (IE 6,7 hariç)

html>/**/body #test { color: red }

Opera 9.27 ve alt sürümleri, safari 2

html:first-child #test { color: red }

Safari 2-3

html[xmlns*=""] body:last-child #test { color: red }

safari 3+, chrome 1+, opera9+, ff 3.5+

body:nth-of-type(1) #test { color: red }

safari 3+, chrome 1+, opera9+, ff 3.5+

body:first-of-type #test {  color: red }

saf3+, chrome1+

@media screen and (-webkit-min-device-pixel-ratio:0) {
 #test  { color: red  }
}

Safari 2 – 3.1

html[xmlns*=""]:root #test  { color: red  }

Safari 2 – 3.1, Opera 9.25

*|html[xmlns*=""] #test { color: red  }

IE6-8 hariç

:root *> #test { color: red  }

IE7

*+html #test {  color: red }

Sadece Firefox. 1+

#test,  x:-moz-any-link  { color: red }

Firefox 3.0+

#test,  x:-moz-any-link, x:default  { color: red  }

Öznitelik Hackleri (Attribute Hacks)

IE6

#test { _color: blue }

IE6, IE7

#test { *color: blue }

IE6 Hariç

#test { color/**/: blue }

IE6, IE7, IE8

#test { color: blue\9; }

IE7, IE8

#test { color/*\**/: blue\9; }

Bugün sizlerle CSS tabanlı hazırlanan sayfalardaki farklı browserlar içinde aynı sonucu almamızı sağlayacak ve daha esnek kurallar yazabileceğimiz CSS Hack yöntemlerini anlatan bir siteyi paylaşmak olacak. Favorilerimiz arasında eklenmesi gereken ve daha uzun zaman işimize yaracak bu sayfaya http://centricle.com/ref/css/filters/ adresi altından ulaşabilirsiniz. Siteyi açtığımızda karşımıza gelen tablo içinde en sol tarafta CSS dosyamız içinde belirleyeceğimiz kuralları ve ilerleyen kolonlarda ise farklı işletim sistemleri altında kullanabileğimiz tarayıcılar ve versiyonları altında belirtilen kuralların çalışıp çalışmadığını gösteren bir tabloya ulaşacaksınız. Kurallar üzerindeki linkler şu anda çalışmıyorlar fakat daha fazla bilgi edinmek isteyenler için sitenin altında ilişkili sayfalar üzerinden gidilerek daha fazla bilgiye sahip olunabilir. Bu liste sayesinde dilediğimiz tarayıcı için ona özel ve sadece o tarayıcının yorumlayabildiği kurallar belirleyebilecez ki buda bize sayfamız üzerinde daha fazla yetkiye sahip olmamızı sağlayacak.

Dilerim ileride birbiri ile daha uyumlu çalışan tarayıcılara sahip olur ve bu tarzda hack yöntemleri kullanmadan sayfalarımız rahatlıkla kodlama şansı buluruz.