Tarayıcı Farklılıklarını Önlemek için CSS Yazmak

Web sitenizi tasarladınız, çeşitli tarayıcılarda test ettiniz lakin Internet Explorer'da test ettiğiniz zaman yaptığınız tasarımın standartlarının dışına çıkmış olan bir site gördüyseniz aradığınız konu budur.

Bazen tarayıcıların CSS'i farklı yorumlaması nedeniyle tasarımcı veya yazılımcılar bu sorunu nasıl çözerim diye bir koşuşturmaya girmektedir. Genellikle bu farklılık/sorun Microsoft Internet Explorer ve serilerinde sıkça yaşanmaktadır. Kısaca bilmemiz gereken spesifik tanımlamalar şu şekildedir.
1) gt (büyüktür): Belirli versiyondan büyük olanlar.
2) gte (eşit veya büyük): Belirli versiyona eşit veya o versiyondan büyük olanlar.
3) lt (küçüktür): Belirli versiyondan küçük olanlar.
4) lte (eşit veya küçük): Belirli versiyona eşit veya o versiyondan küçük olanlar.
5) ! (Belirtilen tarayıcı olmayan): "!IE": Internet Explorer olmayan (Chrome, Opera vs..).

Bunları örnekle sizlere aktaralım.

A) Bütün Internet Explorer Sürümleri için stil yolunu belirtiyoruz. Sitemizi ziyaret eden kişinin tarayıcısı herhangi bir Internet Explorer versiyonu ise
A
<!--[if IE]>
	<link rel="stylesheet" type="text/css" href="ie.css" />
<![endif]-->


B) Internet Explorer olmayan tarayıcılar için (Chrome, Opera, Firefox)
B
<!--[if !IE]>
	<link rel="stylesheet" type="text/css" href="ie-degil.css" />
 <!--<![endif]-->


C) Yalnızca Internet Explorer 7 için
C
<!--[if IE 7]>
	<link rel="stylesheet" type="text/css" href="ie7.css" />
<![endif]-->


D) Yalnızca Internet Explorer 6 için
D
<!--[if IE 6]>
	<link rel="stylesheet" type="text/css" href="ie6.css" />
<![endif]-->


E) Yalnızca Internet Explorer 5 için
E
<!--[if IE 5]>
	<link rel="stylesheet" type="text/css" href="ie5.css" />
<![endif]-->


F) Internet Explorer 6 ve daha düşük versiyonlar için
F
<!--[if lt IE 7]>
	<link rel="stylesheet" type="text/css" href="ie6-ve-daha-dusuk.css" />
<![endif]-->


G) Internet Explorer 6 ve daha yüksek versiyonlar için
G
<!--[if gt IE 5.5]>
	<link rel="stylesheet" type="text/css" href="ie6-ve-daha-yuksek.css" />
<![endif]-->

Alttaki örnekte de görüldüğü gibi 1. resim Chrome, 2. resim Internet Explorer 9 görüntüsüdür.
Örnek
Tarayıcı Farklılıklarını Önlemek için CSS Yazmak

Yorumlar

Henüz hiçbir yorum yazılmamış. İlk yorumu siz yapın.

Yorum Yaz

Avatar

REKLAM

DDos Koruma, Botnet Koruma, Layer 7 Saldırı koruması, Sanal sunucu, Vds sunucu

REKLAM

Çizgi Filmler

EN

  • Popüler
  • Yeni
  • Son Yorum