Etiket arşivi: css

IE6, IE7 ve Firefox için CSS Hack

Bugün size çok basit ama çok işinize yarayacağını düşündüğüm bir CSS inceliği anlatmak istiyorum.

Genelde web sitelerinin en büyük problemi tarayıcı uyumsuzluklarıdır. Bu uyumsuzluklar da tarayıcılar arasında belli bir CSS standardının bulunmamasından kaynaklanmaktadır. Ne kadar eski olsa da halen daha bir çok büyük kurumsal şirkette son kullanıcılarda, yüksek upgrade masrafları ve iyi kötü iş görmeleri nedeniyle IE6 yüklü bilgisayarlar kullanılmakta. Bu yüzden ülkemizde maalesef web sitesi yaparken IE6 uyumluluğu gerekmekte.

Neyse gelelim konumuza. Aşağıda aynı CSS özelliğine IE6, IE7 ve Firefox (IE8, Safari) için nasıl ayrı ayrı değerler verebileceğimizi görüyorsunuz.

1
2
3
4
5
.tablo{
width:250px;   /* IE6, IE7, FF, IE8, Safari */
*width:260px;  /* IE6, IE7 */
_width:270px;  /* IE6 */
}

Yukarıdaki class’a sahip olan elementin tarayıcılara göre hangi “width” özelliği değerini alacağını görüyorsunuz.

Peki bu nasıl oluyor?

HTML’de aynı elemente birden çok olarak verilmiş aynı CSS özelliğiyle ilgili tarayıcılar her zaman en son değeri kendine referans alırlar. Aşağıdaki örnekteki class’a sahip olan element’in width özelliği her zaman en alttaki değere eşit olacaktır.

1
2
3
4
5
6
7
8
.tablo2{
width:250px;
height:100px;
}
.tablo2{ /* evet yanlış değil, yukarıdaki ile aynı isimde */
width:350px;
width:450px;
}

“tablo2” class’ına sahip element’in “width” özelliği 450px olacaktır.

En üstteki örnekteki CSS’e dikkat ettiyseniz özelliğin baş tarafında “*” (yıldız) ve “_” (alt çizgi) karakterleri var idi. “*” ile başlayann özellikleri Firefox hatalı olarak algılamaktadır. “_” ile başlayanları ise hem FF, hem de IE7 hatalı olarak algılamaktadır. Aşağıdaki tabloda bunu görebiliriz.

* _
IE6 OK OK
IE7 OK HATA
FF HATA HATA

En yukarıdaki örneği tekrar ele alırsak, ilk satırdaki width değeri tüm tarayıcılarda geçerli olacaktır. İkinci satırda “*” ile başlayan satıra gelindiğinde FF bu satırı hatalı olarak kabul ettiği için CSS önceki değerini koruyacak ancak IE7 ve IE6’da “*” ile başlayan satırdaki değeri alacak. Üçüncü satırda da bu kez IE7’de hatalı olarak kabul ettiği için bir önceki “*” ile başlayan satırdaki değeri koruyacak fakat IE6 bu satırı kabul ettiği için son olarak IE6’da CSS özelliğimiz bu değeri alacaktır.

Böylece tarayıcılar arasında yaşayacağımız irili ufaklı tasarım kaymalarını ve bozukluklarını tarayıcıdan bağımsız olarak gidermiş olacağız.

Bambaşka bir konuda daha görüşmek dileklerimle…