I wanted to share with you my preferred method of targeting CSS to IE6.
Conditional Comments
<!-- This is the main stylesheet -->
<link rel="stylesheet" href="http://www.example.com/css/global.css" type="text/css" media="screen"/>
<!--[if IE 6]>
<!-- This contains ie6 specific overrides -->
<link rel="stylesheet" href="http://www.example.com/css/ie6.css" type="text/css" media="screen"/>
<![endif]-->
<!--[if IE 7]>
<!-- This contains ie7 specific overrides -->
<link rel="stylesheet" href="http://www.example.com/css/ie7.css" type="text/css" media="screen"/>
<![endif]-->
<!--[if IE 8]>
<!-- This contains ie8 specific overrides -->
<link rel="stylesheet" href="http://www.example.com/css/ie8.css" type="text/css" media="screen"/>
<![endif]-->
I prefer this method because it keeps the CSS cleaner, and when the apocalypse hits and IE6 is no longer relevant it’s easy to remove code specific to IE6.
The idea behind this method is, you would write your code how you normally would for any standards compliant browser. Then you would go back and in the ie6.css sheet you would add “overrides”. Because CSS (Cascading Style Sheets) is by design built so that style classes lower on the page take higher priority, this should fix your issue.
So you would put something like this in your global.css
.textarea {
border: 1px solid #000;
padding: 3px 5px;
margin: 5px;
}
and you would put this in your ie6.css
.textarea {
border: 1px solid #FF0000;
}
The margin and padding properties are inherited so all you are changing is the border color. And it only occurs in IE6 because of the Conditional Comments.
What is your preferred IE targeting method? Leave a comment below.
If you enjoyed reading this post, check out these posts Getting Started with HTML 5, Creating Triangles in CSS.
