Internet Explorer Sürümleri ve FireFox İçin Ayrı CSS Tanımlamarı Yapmak

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.

Kod:

<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.

Kod:

--[if IE]> <> @import url("/ie.css");  >

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.

Kod:

--[if gt IE 5]> <> @import url("/ie.css");  >

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.