Günümüzde bir tasarımın, tam manasıyla bir TASARIM olması için browser ayırt etmeden, bütün browserlarda aynı şekilde görüntülenmesi gerekmektedir. Tasarımınızda kullandığınız CSS kodları zaten o tasarımın temelidir. Fakat hala bazı browserlar bir çok kodu diğerlerinden çok farklı şekilde yorumlayabiliyor. Bunun önüne geçmek için bize lazım olan en uygun yöntem “Şartlı Yöntem” denilen, her tarayıcı için farklı css çağırma yöntemidir.

Bunu iki farklı şekilde kullanabiliriz ;

1. Bir CSS dosyasını sayfaya import etme: Bu yöntemi kullanırken aşağıda verdiğim kodu sayfanızın “head” tagları arasına eklemeniz lazım. Ve bu yöntem sadece Internet Explorer Tarayıcısı için geçerlidir.

   lt : daha düşük.
   lte : eşit veya daha düşük.
   gt : daha yüksek.
   gte : eşit veya daha yüksek.

   anlamlarına gelmektedir. Bunları şu örneklerdeki gibi kullanıyoruz;
   IE6 ve Alt Sürümleri için:

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

   IE7′nin Alt Sürümleri için:

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

   Sadece IE 7 İçin:

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

   Bunları amacınıza göre çoğaltabilirisiniz.

2. Bir CSS dosyasının içindeki kodların arasında: Bu yöntem ile CSS kodlarınızın arasına aşağıdaki türde kodları yerleştirerek işleminizi gerçekleştire bilirsiniz.

   Örnek CSS Kodunuz #zirtbirt ID’si ve .zirtbirt CLASS’ı olsun.

   Internet Explorer için;

   /*IE6 ve öncesinde çalışır*/
   #zirtbirt { _color: blue; }
   /*IE 7 ve öncesinde çalışır*/
   .zirtbirt { *color: red; }
   

   Yukarıdaki kodlarda ie6 ve öncesi işin görev kodundan önce “_” işaretini kullandık. ie7 ve öncesi için ise “*” işaretini. Fakar bu işlem sadece id ve class kodlarında çalışır. Yani taglar için kullanamayız. Tag, class veya id css kodlarının herhangi biri için aşağıdaki yöntemi de kullanabiliriz:

   /*IE6 ve öncesinde çalışır*/
   * html #zirtbirt { color: red }
   /*IE 7 ve öncesinde çalışır*/
   *:first-child+html #zirtbirt { color: red }
   

   Yukarıdaki kodlarda da farklı olarak kodumuzun başlarına “* html ” ve “*:first-child+html ” ekleriniz getirdik.

   FireFox İçin:

   /*Firefox 2.0 ve aşağısı için*/
   #zirtbirt, x:-moz-any-link { color:red; }
   
   /*Firefox 3.0 için*/
   #zirtbirt, x:-moz-any-link, x:default { color:red; }
   
   /* Firefox 3.5 ve üstü için*/
   body:first-of-type #zirtbirt { color:red; }
   

   Diğer Tarayıcılar:

   /* Opera 9.27 ve önceki için*/
   html:first-child #zirtbirt  { color: red }
   
   /* Safari için*/
   html[xmlns*=""] body:last-child #zirtbirt { color: red }
   
   /*safari 3+, chrome 1+, opera9+, ff 3.5+ için*/
   body:nth-of-type(1) #zirtbirt  { color: red }
   
   /* safari 3+, chrome 1+, opera9+, ff 3.5+ */
   body:first-of-type #zirtbirt  {  color: red }
   
   /* saf3, chrome1+ */
   @media screen and (-webkit-min-device-pixel-ratio:0) {
   #zirtbirt { background: #000000; border: 1px solid #ffffff  }
   }
   

Çok işinize yaracağına eminim kolay gelsin…