İnternet Explorer’a Özel Css Yazmak

Merhaba Arkadaşlar,

Bu makalede internet explorer için ekstra css dosyaları hazırlayarak nasıl kod yazabileceğimizi göreceğiz. Yeni sürümleri ile birlikte iyi diyebileceğimiz kadar yeni nesil tarayıcılara yaklaşan internet explorer, eski sürümlerinde büyük hatalar verebiliyor. Bu hataları düzeltirken asıl css dosyamızda değişiklik yaptığımızda Chrome, firefox, safari gibi doğru sonuçlar aldığımız tarayıcılarda bozulmalar göreceğiz. Şimdi yapacağımız işlem sonunda yazdığımız kodlar yalnızca internet explorer tarayıcısı açıldığında devreye girecektir.

Değişik özellikleri olan bu yapıda örneğin ie7 ve ie8 versiyonları için ayrı ayrı kod yazabiliyoruz. Ayrıca yazacağımız kodlar ie9 versiyonunun altında olan versiyonları etkileyecek şekilde de seçenekler ile geliştirilebiliyor. Bir liste halinde vereceğim bu yapının içerisine css dosyaları dışında javascript dosyalarınızı da ekleyebilirsiniz.

Tüm IE Versiyonları :


<!--[if IE]>
	<link rel="stylesheet" type="text/css" href="all-ie-only.css" />
<![endif]-->

IE Dışındaki Tarayıcılar :


<!--[if !IE]><!-->
	<link rel="stylesheet" type="text/css" href="not-ie.css" />
 <!--<![endif]-->

Yalnızca IE7 Versiyonu :


<!--[if IE 7]>
	<link rel="stylesheet" type="text/css" href="ie7.css">
<![endif]-->

Yalnızca IE6 Versiyonu :


<!--[if IE 6]>
	<link rel="stylesheet" type="text/css" href="ie6.css" />
<![endif]-->

Yalnızca IE5 Versiyonu :


<!--[if IE 5]>
	<link rel="stylesheet" type="text/css" href="ie5.css" />
<![endif]-->

Yalnızca IE 5.5 Versiyonu :


<!--[if IE 5.5000]>
<link rel="stylesheet" type="text/css" href="ie55.css" />
<![endif]-->

IE6 ve Alt Versiyonları :


<!--[if lte IE 6]>
<link rel="stylesheet" type="text/css" href="ie6-dusuk.css" />
<![endif]-->

IE6 ve Üst Versiyonları :


<!--[if gte IE 6]>
<link rel="stylesheet" type="text/css" href="ie6-yuksek.css" />
<![endif]-->

— —

IE7 ve Alt Versiyonları :


<!--[if lte IE 7]>
<link rel="stylesheet" type="text/css" href="ie7-dusuk.css" />
<![endif]-->

— —

IE7 ve Üst Versiyonları :


<!--[if gte IE 7]>
<link rel="stylesheet" type="text/css" href="ie7-yuksek.css" />
<![endif]-->

— —

Hepsi için tek tek yazarak uzatmak istemediğim için özellikle x sürümü ve altı/üstü şeklindeki kapsayıcılardan yalnızca 6 ve 7 versiyonlarını örnek verdim. Bunları diğer versiyonlar için de uygulayabilirsiniz.

Ayrıca basit bir mantık yürütmek istediğimizde örneğin ” IE7 ve Üst Versiyonları ” kapsayıcısı için şu şekilde bir kod yazmıştık :


<!--[if gte IE 7]>
<link rel="stylesheet" type="text/css" href="ie7-yuksek.css" />
<![endif]-->

Görmüş olduğumuz kod yapısını aşağıda belirttiğim şekilde değiştirdiğimizde de aynı işlemi görecektir :


<!--[if gt IE 6]>
<link rel="stylesheet" type="text/css" href="ie7-yuksek.css" />
<![endif]-->

İlk satırda bulunan versiyon değerini 7 rakamından 6‘ya çevirdik ve gte‘yi gt olarak değiştirdik. Çalıştırdığımızda aynı işlemi gerçekleştirdiğini göreceğiz.

Bu ikili ve üçlü harflerin ne anlama geldiğini de açıklayarak makalemizi sonlandıralım.

lt : Belirtilen versiyonun alt versiyonlarına göre çalışır.
lte: Belirtilen versiyon ve alt versiyonlarına göre çalışır.
gt: Belirtilen versiyonun üst versiyonlarına göre çalışır.
gte: Belirtilen versiyon ve üst versiyonlarına göre çalışır.

Reklam

Tüm Yorumlar

Leave a Reply

Your email address will not be published. Required fields are marked *