Tarayıcılara özel kapsamlı CSS Hack listesi

Arayüz kodlayan bir çok kişinin ihtiyacı olacağını düşündüğüm Tarayıcılara özel olarak kullanacabileceğimiz CSS Hack yöntemlerinin bir çoğunu görebileceğiniz listeyi sizlerle paylaşmak istedim. Her ne kadar CSS Hack yapmadan arayüz hazırlamak hayalim olsada umarım bu listedeki Hack yöntemleri hayatınızı kolaylaştırırır.

Seçici Hackleri (Selector Hacks)

IE6 ve alt sürümleri

[css]* html #test { color: red }[/css]

IE7

[css]*:first-child+html #test { color: red }[/css]

IE7, FF, Saf, Opera

[css]html>body #test { color: red }[/css]

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

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

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

[css]html:first-child #test { color: red }[/css]

Safari 2-3

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

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

[css]body:nth-of-type(1) #test { color: red }[/css]

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

[css]body:first-of-type #test { color: red }[/css]

saf3+, chrome1+

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

Safari 2 – 3.1

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

Safari 2 – 3.1, Opera 9.25

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

IE6-8 hariç

[css]:root *> #test { color: red }[/css]

IE7

[css]*+html #test { color: red }[/css]

Sadece Firefox. 1+

[css]#test, x:-moz-any-link { color: red }[/css]

Firefox 3.0+

[css]#test, x:-moz-any-link, x:default { color: red }[/css]

Öznitelik Hackleri (Attribute Hacks)

IE6

[css]#test { _color: blue }[/css]

IE6, IE7

[css]#test { *color: blue }[/css]

IE6 Hariç

[css]#test { color/**/: blue }[/css]

IE6, IE7, IE8

[css]#test { color: blue\9; }[/css]

IE7, IE8

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

Css Hack & Filters Metodları

Bir sayfanın arayüzünü hazırlarken mümkün olan tüm tarayıcılar içirisinde (Internet Exlorer, Firefox, Opera, Safari, Mozilla, Konqueror vs.) aynı şekilde çalışması için özen gösteririm. Fakat bunu başarmak her zaman için kolay olmaz. Her ne kadar web dünyasında standartları belirleyen kurum olan W3‘ün önerilere uygun olarak sayfamı kodlamaya çalışsamda XHTML, CSS ve Javascript kodlarımda tarayıcılar arasındaki yorum farklılıkları yüzünden karşılaştığım problemler gelecek saatleri stres içinde geçirmeme neden olur.

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.