Css te kodlama yaparken karşılaştığımız en büyük sorunlardan birisi de web sitemizin görüntüsünü tüm tarayıcılarda aynı şekilde görüntülenememesidir.  Bunun sebebi tarayıcıların bazı kodları yorumlayamaması yada farklı yorumlamasıdır. Bu sorunların başını tabii ki İnternet Explorer çekmekte. Bu tarayıcıların yorumlama farklarını en aza indirmek için biz ilk olarak reset.css kullanırız. Bu çözüm bizim için çok yararlı oluyor fakat bazı durumlarda maalesef bu çözüm yeterli olmuyor. Bu durumlarda da imdadımıza Koşullu Yorumlar ve Css hack koşuyor. Css hack e başka bir yazımda değineceğim.

Koşullu yorumlar sadece İnternet Explorer da çalışır ve sadece IE versiyonları için özel talimatlar vermek için kullanılır. Koşullu yorumlar xhtml in bu kodu yorumlayıp yorumlamayacağını belirler.

xhtml de açıklama

1
<!-- Comment text -->

şeklindedir. Koşullu Yorumlar ise;

1
<!--[If operatör]> HTML <![endif]-->

şeklindedir. Örnek verecek olursak;

1
<!--[if IE]> Bu kod sadece Interner Explorer 5 ve üzeri versiyonlarda yorumlanır. <![endif]-->

yukarıdaki kod sadece internet explorer 5 ve üzeri versiyonlarda yorumlanacaktır. if komutundan sonra farklı operatörler kullanabiliriz.

Kullanabileceğimiz operatörler şunlardır.

  • gt     – den büyük
  • gte    – den büyük yada eşit
  • lt     – den küçük
  • lte    – den küçük yada eşit
  • !      – değilse

Bu ifadelerin ingilizce açılımları ;

gt: greater than (den büyük),
lt: less than (den küçük),
gte: greater than or equal to(den büyük yada eşit),
lte: less than or equal to(den küçük yada eşit)

şeklindedir. Bu şekilde bilirseniz aklınızda kalması kolaylaşır. Bunlara örnekler verirsek

IE 6 nın aşağısı için;

1
2
3
<!--[if lt IE 6]>
   <link rel="stylesheet" type="text/css" href="ie6-dan-asagisi.css" />
<![endif]-->

IE 6 ve aşağısı için;

1
2
3
<!--[if lte IE 6]>
   <link rel="stylesheet" type="text/css" href="ie6-ve-asagisi.css" />
<![endif]-->

IE 6 nın yukarısı için;

1
2
3
<!--[if gt IE 6]>
   <link rel="stylesheet" type="text/css" href="ie6-dan-yukarisi.css" />
<![endif]-->

IE 6 ve yukarısı için;

1
2
3
<!--[if gte IE 6]>
   <link rel="stylesheet" type="text/css" href="ie6-ve-yukarisi.css" />
<![endif]-->

IE değilse;

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

Görüldüğü gibi bu yöntemle tarayıcı yorumlama farklarını kolaylıkla düzeltebilirsiniz. Bende temamı kodlarken IE 8 e uyarlama aşamasında bu çözüme başvurdum. Bu çözümü sadece css düzenlemeleri için değil javascript ve html düzeltmeleri içinde rahatlıkla kullanabilirsiniz.

Kaynaklar