Internet Explorer Sürümleri ve FireFox İçin Ayrı CSS Tanımlamarı Nasıl Yapılır?

0 dakikada yazıldı

16021 defa okundu

Düzenle

Web tasarımları ile uğraşırken HTML ve CSS kodlarını düzenleme
aşamasında en sıkıntılı sorunlardan biri farklı tarayıcılarda aynı
görsel sonucu almaya çalışmaktır. Bazen bu sorunu çözmek hiç mümkün
olmayabilir. Sitemizin tüm görsel özelliklerini harici bir CSS
dosyasında tuttuğumuzu düşünürsek, aslında tek yapmamız gereken farklı
internet tarayıcıları için farklı CSS dosyaları hazırlayarak söz konusu
tarayıcılar ile sitemiz açıldığında uygun CSS dosyasını sayfamıza
ekliyor olmak.

Sayfamıza bir CSS dosyası eklemek için aşağıdaki kodu kullanacağız.

<style>
@import url("/ie.css");
</style>

Kod içerisinde import CSS komutunu kullanarak sayfaya adresini
belirttiğim CSS dosyasının yüklenmesini sağlamış oluyorum. Sıra geldi
tarayıcının Internet Explorer olup olmadığını anlamaya.

<!--[if
IE]>

< style>
@import url("/ie.css");
</style>
<![endif]-->

Yukarıdaki kodun renginin yeşil olmasının nedeni aslında standart
tarayıcılar tarafından kodun işlenmeyeceği anlamına geliyor.
Başlangıcında <!-- ve sonunda -->
olan bölgeler HTML kodlarında devre dışı bırakılmış sayılır. O
nedenle yukarıdaki kod FireFox'da çalışmayacak. Oysa Internet Explorer
kodun ilk kısmında yer alan [if IE]
şart komutunu algılayacaktır. Böylece eğer tarayıcı Internet
Explorer ise söz konusu CSS dosyası sayfaya eklenecek, değilse bu
satırlar devre dışı sayılacağı için eklenmeyecek. Ayrıca isterseniz
farklı Internet Explorer sürümleri için de kontroller yaparak farklı CSS
dosyaları ekleyebilirsiniz.

<!--[if
gt IE 5]>

< style>
@import url("/ie.css");
</style>
<![endif]-->

Yukarıdaki kodun ilk satırında yer alan gt komutu "daha yuksek" anlamına
geliyor. Yani eğer tarayıcının Internet Explorer sürümü 5'den yüksek ise
kod çalıştırılacaktır. Bunun gibi aşağıdaki farklı karşılaştırma
komutlarını da kullanabilirsiniz.

gt - daha yuksek
gte - esit veya daha yuksek
lt - daha dusuk
lte - esit veya daha dusuk

Bana bu kadarı yetmez, ben kullanıcının tarayıcısının Safari, Camina,
Konqueror vs olup olmadığını da anlamak istiyorum diyorsanız çözüm
JavaScript. JavaScript ile kullanıcı tarafında gerekli kontrolleri
yaparak sayfanıza uygun CSS dosyasını ekleyebilirsiniz. Gerekli
kontrolleri yapacak olan uygun JavaScript fonksiyonunu
http://www.quirksmode.org/js/detect.html adresinde bulabilirsiniz.

Kolay gelsin...