Internet Explorer Koşullu İşlemleri
Koşullu yorum basit bir Internet Explorer özelliğidir, Microsoft Windows ve IE5 sonrasında geçerlidir. Mantık olarak Ineternet Explorerin sürümüne görefarklı HTML blokları kullanıcılara sunmak olarak özetlenebilir.
Bir alt düzey gizli koşullu yorumun temel sözdizimi
<!--[if condition]>
(HTML to use if condition is true)
<![endif]-->
(HTML to use if condition is true)
<![endif]-->
Eğer koşul doğruysa ve IE tarayıcısı if ve endif arasındaki HTML kodlarını değerlendirir.
Farklı IE tarayıcıları için örnek kodlar
<!--[if IE 5]>
<p>This message is only displayed in IE5.</p>
<![endif]-->
<!--[if !IE 5]>
<p>This message is only displayed in browsers other than IE5.</p>
<![endif]-->
<!--[if lt IE 7]>
<p>This message is only displayed in browsers earlier than IE7.</p>
<![endif]-->
<!--[if gte IE 6]>
<p>This message is only displayed in IE6 and greater.</p>
<![endif]-->
<p>This message is only displayed in IE5.</p>
<![endif]-->
<!--[if !IE 5]>
<p>This message is only displayed in browsers other than IE5.</p>
<![endif]-->
<!--[if lt IE 7]>
<p>This message is only displayed in browsers earlier than IE7.</p>
<![endif]-->
<!--[if gte IE 6]>
<p>This message is only displayed in IE6 and greater.</p>
<![endif]-->
IE6 ve daha önceki IE tarayıcıları için ek bir stil sayfası gösterimi
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="style.css" />
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="style_ie6.css" />
<![endif]-->
</head>
<body>
<div id="stretchy-div">
<p>This is my DIV with a min-height of 300 pixels.</p>
</div>
</body>
</html>
"DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="style.css" />
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="style_ie6.css" />
<![endif]-->
</head>
<body>
<div id="stretchy-div">
<p>This is my DIV with a min-height of 300 pixels.</p>
</div>
</body>
</html>
Örnek Kodlar:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en'>
<head>
<title>Conditional Comments</title>
</head>
<body>
<!--[if lt IE 7]>
<p>
This text is only seen by IE 6.0, IE 5.5, and IE 5.0, but not IE
7.0. Other browsers just ignore this altogether, since it's
contained in HTML comments.
</p>
<![endif]-->
<!--[if IE 6]>
<p>
This text is only seen by IE 6.0.
</p>
<![endif]-->
<!--[if gt IE 6]>
<p>
This text is only seen by IE 7.0.
</p>
<![endif]-->
</body>
</html>
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en'>
<head>
<title>Conditional Comments</title>
</head>
<body>
<!--[if lt IE 7]>
<p>
This text is only seen by IE 6.0, IE 5.5, and IE 5.0, but not IE
7.0. Other browsers just ignore this altogether, since it's
contained in HTML comments.
</p>
<![endif]-->
<!--[if IE 6]>
<p>
This text is only seen by IE 6.0.
</p>
<![endif]-->
<!--[if gt IE 6]>
<p>
This text is only seen by IE 7.0.
</p>
<![endif]-->
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css" media="Screen">
body {
margin: 0;
padding: 10px;
}
</style>
<!--[if gte IE 5]>
<style type="text/css">
html, body {margin:0; width:160px;}
</style>
<![endif]-->
</head>
<body>
<p>this is a test. this is a test. this is a test. this is a test. </p>
</body>
</html>
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css" media="Screen">
body {
margin: 0;
padding: 10px;
}
</style>
<!--[if gte IE 5]>
<style type="text/css">
html, body {margin:0; width:160px;}
</style>
<![endif]-->
</head>
<body>
<p>this is a test. this is a test. this is a test. this is a test. </p>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en'>
<head>
<title>cursor</title>
<style rel='stylesheet' type='text/css'>
div {
width: 50px;
height: 50px;
border: 1px solid rgb(234, 234, 234);
margin: 5px;
cursor: url('custom_cursor.png'), default;
background: mistyrose;
}
</style>
<!--[if ie]>
<style type='text/css'>
div {
cursor: url('custom_cursor.cur'), default;
}
</style>
<![endif]-->
</head>
<body>
<div></div>
</body>
</html>
Kaynaklar:
Yorumunuzu Ekleyin