Browser Specific CSS
Most of time we spend time in fixing the style issues to make the web page work in all the browsers, particulary IE browsers. In this post we look at how to include the css file for browser version. This will also go in tag with all the regular css links. The opening and closing tags should be inside the HTML comments. Between the comments targeted browser is specified as below:
Most of time we spend time in fixing the style issues to make the web page work in all the browsers, particulary IE browsers. In this post we look at how to include the css file for browser version. This will also go in tag with all the regular css links. The opening and closing tags should be inside the HTML comments. Between the comments targeted browser is specified as below:
Target ALL Versions of IE:
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="ie_only.css”>
<![endif]-->
Target ALL browsers except IE:
<!--[if !IE] >
<link rel="stylesheet" type="text/css" href="not_ie_only.css”>
<![endif]-->
Target IE 7 only:
<!--[if IE 7] >
<link rel="stylesheet" type="text/css" href="ie_7_only.css”>
<![endif]-->
Target IE 6 only:
<!--[if IE 6] >
<link rel="stylesheet" type="text/css" href="ie_6_only.css”>
<![endif]-->
Most of the time is good to include media="screen, projection" while targeting only IE 6 browsers.
Target IE 5 only:
<!--[if IE 5] >
<link rel="stylesheet" type="text/css" href="ie_5_only.css”>
<![endif]-->
Target IE 5.5:
<!--[if IE 5.5] >
<link rel="stylesheet" type="text/css" href="ie_5.5_only.css”>
<![endif]-->
Target IE 6 and lower versions:
<!--[if lt IE 7] >
<link rel="stylesheet" type="text/css" href="less_than_ie_6_only.css”>
<![endif]-->
Target IE 7 and higher version:
<!--[if gt IE 7] >
<link rel="stylesheet" type="text/css" href="greater_than_ie_7_only.css”>
<![endif]-->
gte (greater than equal), lte (less than equal) can also be used inside the HTML comments for including browser specific css file.
Elango
