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]

Google Chrome ve Safari 3.1 için CSS Hack Yöntemi

Kullanılan yöntem aslında sadece Google Chrome ve Safari 3.1 tarayıcılarını hedef alan bir yöntem değildir. Fakat şu anda Google Chrome ve Safari 3.1 bilinen tüm seçicilere destek vermesi bu yöntemi sadece bu iki tarayıcı için kullanma imkanı sağlar.

body:nth-of-type(1) p{
color: #333333;
}

Yukarıdaki kuralı sayfamıza eklediğimizde sadece Google Chrome ve Safari 3.1 tarayıcılarında paragrafların renginin gri olduğunu göreceksiniz. Kod tam olarak nasıl çalışır anlatmak istersek:

Tüm bu pseduo’lara ait detaylı bilgiye http://www.w3.org/TR/CSS2/selector.html altından erişebilir ve daha fazla bilgi sahibi olabilirsiniz.

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.