html tutorial - How to define or create style sheet only for Internet Explorer - html5 - html code - html form
Answer: Use IE Conditional Style sheets
If you are a web designer you may have awful experience while dealing with the ie bugs. Most of time you cannot escape type it may be because of the project requirement or your client still using older version of internet explorer. so let's deal with it.
- Every version of internet explorer behaves somewhat differently than others.
- So what we do here is define separate style sheets for different versions of ie browsers to pin point the exact problem in a specific version.
Let's say the CSS property you have defined for some component does not work as expected in ie, however it works dead in alternative browsers like Firefox or Chrome. so basically what we do is define a style sheet that only target the ie browser and then we either adjust the value of that property or add some new property to this style sheet to fix this issue.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>IE Only Style Sheet</title>
<link rel="stylesheet" type="text/css" href="css/default.css">
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="css/ie.css">
<![endif]-->
</head>
<body>
<h1>Define Style Sheet for IE</h1>
<p>If you open this page in IE the output will be different.</p>
</body>
</html>The starting and ending tags of the conditional style sheets are just regular hypertext markup language comments. In between the bracket conditional statements are placed which has the following meaning.
- The meaning "IF" and "IE" are fairly obvious.
- ! stands for "not", so !IE means "not IE".
- gt stands for "greater than".
- gte stands for "greater than or equal to".
- lt means that "less than".
- lte means that "less than or equal to".
IE Only Style Sheets
The conditional statements are most likely the most common way create ie only style sheets in order to fix ie bugs especially for IE6, IE7, IE8 versions.the following section summarizes the syntax for targeting the different versions of internet explorer browsers.
Targeting All Versions of IE
Example
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="css/ie-only.css">
<![endif]-->Targeting All Browsers Except IE
Example
<!--[if !IE]>
<link rel="stylesheet" type="text/css" href="css/all-except-ie.css">
<![endif]-->Targeting Only IE8 Version
Example
<!--[if IE 8]>
<link rel="stylesheet" type="text/css" href="css/ie8.css">
<![endif]-->Targeting IE8 and Lower Versions
Example
<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" href="css/ie8-and-lower.css">
<![endif]-->Example
<!--[if lte IE 8]>
<link rel="stylesheet" type="text/css" href="css/ie8-and-lower.css">
<![endif]-->Targeting IE8 and Higher Versions
Example
<!--[if gt IE 7]>
<link rel="stylesheet" type="text/css" href="css/ie8-and-higher.css">
<![endif]-->Example
<!--[if gte IE 8]>
<link rel="stylesheet" type="text/css" href="css/ie8-and-higher.css">
<![endif]-->Similarly you can define style sheet for other versions of Internet Explorer.
Targeting Only IE7 Version
Example
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="css/ie7.css">
<![endif]-->Targeting IE7 and Lower Versions
Example
<!--[if lt IE 8]>
<link rel="stylesheet" type="text/css" href="css/ie7-and-lower.css">
<![endif]-->Example
<!--[if lte IE 7]>
<link rel="stylesheet" type="text/css" href="css/ie7-and-lower.css">
<![endif]-->Targeting IE7 and Higher Versions
Example
<!--[if gt IE 6]>
<link rel="stylesheet" type="text/css" href="css/ie7-and-higher.css">
<![endif]-->Example
<!--[if gte IE 7]>
<link rel="stylesheet" type="text/css" href="css/ie7-and-higher.css">
<![endif]-->Targeting Only IE6 Version
Example
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="css/ie6.css">
<![endif]-->Targeting IE6 and Lower Versions
Example
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="css/ie6-and-lower.css">
<![endif]-->Example
<!--[if lte IE 6]>
<link rel="stylesheet" type="text/css" href="css/ie6-and-lower.css">
<![endif]-->;Targeting IE6 and Higher Versions
Example
<!--[if gt IE 5]>
<link rel="stylesheet" type="text/css" href="css/ie6-and-higher.css">
<![endif]-->Example
<!--[if gte IE 6]>
<link rel="stylesheet" type="text/css" href="css/ie6-and-higher.css">
<![endif]-->