IE Specific CSS loading:
There can be scenarios wherein you might want to load IE version specific CSS. Say an IE6.css file for IE 6 and below, IE7.css for IE 7 alone. In these scenarios, it is good to exploit the conditional comments that IE layout engine Trident look upon.
Check the code below to check out how to implement these comments:
<!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>
<link href=”main.css” rel=”stylesheet” />
<!–[if IE 7]>
<link href=”ie7.css” rel=”stylesheet” />
<![endif]–>
<!–[if lt IE 7]>
<link href=”ie6.css” rel=”stylesheet” />
<![endif]–><title>Conditional Comments Structure</title>
</head>
<body></body>
</html>
In the above example, the main.css will be loaded always. While depending on the IE browser versions, the other css will selected. IE7.css will be selected only for IE 7.0 browsers and IE6.css will be selected for IE 6 and below. The styles applied by the selectors in main.css will be overridden by the respective selectors in these css files, if any.
Conditional comments cannot be inserted into the css file, however they can be used with the style tag. For example:
<style type=”text/css”>
.MyStyle {
background-color: red;
}
</style><!–[if lt IE 7]>
<style type=”text/css”>
.MyStyle {
background-color: blue;
}
</style>
<![endif]–>
The other possible operators that can be used in the conditional comments are:
Operator Description Example ! not <!–[if ! IE 7]> lt less than <!–[if lt IE 7]> gt greater than <!–[if gt IE 7]> lte less than or equal <!–[if lte IE 7]> gte greater than or equal <!–[if gte IE 7]>
To target styles for IE 5, IE5.5, IE6.0 and IE 7.0 separately, you can use the following snippet:
h3{
background: #00f; /* all browsers including Mac IE */
*background: #f00; /* IE 7 and below */
_background: #0f0; /* IE 6 and below */
_bac\kground: #f60; /* IE 6 only */
_background:/**/ #f62; /* IE 5.5 only */
_background/**/: #0f0; /* IE 5.0 */
}
Targeting Firefox Browser:
I would suggest your design your CSS for Firefox and then get back to IE to fix the IE specific bugs. Even under such cases, if you want Firefox specific fix, you can use the code below to load style specific for Firefox browser.You can also add the section inside the css file.
<!DOCTYPE html>
<html>
<head>
<style type=”text/css”>
@-moz-document url-prefix() {
h1 {
color: red;
}
}/* Firefox 1 and 2 specific */
body:empty h1 {
color: red;
}
</style>
</head>
<body>
<h1>This should be red in FF</h1>
</body>
</html>
Targeting Safari & Opera Browser:
Add styles specific for safari browser, you can use the following snippet:
@media screen and (-webkit-min-device-pixel-ratio:0) {
/* Safari 3.0 and Opera 9 rules here */
}
Targeting Opera Browser only:
Opera hacks work out of the negation in CSS.
/* Opera Specific */
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0)
{
head~body #h1{ display: block; }
}
The Relentless FrontEnd - Aackose Lal's Blog 