Arkadaşlar merhabalar, ilk yazıma malum her tarayıcının css kodlarını farklı algılaması sonucunda bizlerin deli olup başvurmak zorunda olduğumuz css hack yöntemlerinden bahsedeceğim. Bu yöntemlerin uygulandığı başlıca tarayıcı tabi ki internet explorer oluyor öncelikle bundan başlamak istiyorum.
- Internet explorer ile ilgili CSS Hack yöntemleri.
#element {
_color: red;
}
Açıklama: Bu yöntem özellik kısmının başına _ karakteri ile kullanılır.
Tarayıcı sürümü: Internet explorer 6 için geçerlidir.
#element {
*color: blue;
}
Açıklama: Bu yöntem özellik kısmının başına * karakteri ile kullanılır.
Tarayıcı sürümü: Internet explorer 6 ve 7 için geçerlidir.
#element {
color: green \0/;
}
Açıklama: Bu yöntem değer kısmının sonuna eklenir \0/ karakterleri ile kullanılır.
Tarayıcı sürümü: Internet explorer 8 ve 9 için geçerlidir.
#element {
color: green\9;
}
Açıklama: Bu yöntem değer kısmının sonuna eklenir \9 karakterleri ile kullanılır.
Tarayıcı sürümü: Internet explorer 9 için geçerlidir.
Tabiki de bahsettiğimiz gibi bu yöntemler sadece Internet Explorer ile bitmiyor şimdi sırada Opera, Chrome, Safari ve Firefox var.
(Hepsi şu anki güncel sürümlerde çalışır durumdadır. / Opera 11,52 / Chrome 15,0,874 / Safari 5.1.1 / Firefox 7.0.1)
Bu yöntemlerde dikkat edilmesi gereken konu { } (yani süslü parantez) karakterleri arasına css seçicilerimizi eklemektir.
Örnek ( Opera css hack yönteminde head~body ‘den sonra eklenen seçicilerdir biz bunları dilediğimiz gibi çoğaltabiliriz. / #element1, #element2, #element3 gibi..
- Opera, Chrome, Safari ve Firefox ile ilgili CSS Hack yöntemleri
/* Opera CSS Hack */
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0)
{
head~body #element1 { display: block; }
head~body #element2 { display: block; }
head~body #element3 { display: block; }
}
/* Safari&Chrome CSS Hack */
@media screen and (-webkit-min-device-pixel-ratio:0)
{
#element1 { display: block; }
#element2 { display: block; }
#element3 { display: block; }
}
/* Firefox CSS Hack */
@-moz-document url-prefix() {
#element1 { display: block; }
#element2 { display: block; }
#element3 { display: block; }
}
Umarım eklediğim bilgilerle sizlere yardımcı olabilmişimdir.
Herkese sevgi ve saygılar..
