I’ve used the conditional comments technique for my IE6/7/8 CSS “hacks”, so that the main CSS file (with the common/standard classes) validates correctly (isolating the IE “hacks” in separate CSS files).
Something like this:
<!--[if IE 7]>
<link href="css/layoutIE7.css" rel="stylesheet" type="text/css" />
<![endif]-->
Now I’ve started using conditional comments to add a class to the <body> (please read this answer: CSS if statements… is it right? ) and then target the class that needs a “hack” in my main CSS file, this way I can have only one file.
The problem with this method is that because I have everything in one file, it means that in case I have something as “simple” as the CSS3 opacity property:
.mydiv {
opacity:0.6;
}
The IE “counterpart” (i.e.: “hack”) will have to be something like:
.mydiv {
filter:alpha(opacity=60);
}
Which doesn’t validate correctly.
I know the method I was using before still had this problem, but since you could test the site in a non-IE environment, it always validated (because I made sure the main CSS was valid), now since I’m trying to have one single CSS it doesn’t validate (for the reasons explained).
My question is how to add this “hacks” in a way that the validator considers it valid?
Hopefully the answer should be CSS only.
I don’t think this is possible. If a non-standard CSS property is present in the style sheet, it won’t validate. Nothing one can do to change that.
I think you’ll have to choose either valid CSS, or using multiple style sheets.