;){kind=avatar}
CSS Condititionals are for more than just IE
Posted by Sarah Koszty on February 24, 2009, 6:50 AM EST
While validating the CSS of one of my personal sites, the W3 CSS validator tool was being rather fussy about my -moz and -webkit styles. So after a few minutes considering a work-a-round it hit me, conditional browser tests were for more than just IE.
So if your like me, validation of your markup means alot more than a silly box you can place on your site saying that the W3 has verified you code as clean. No, it's a lot more than that. It means you care about the quality of your work, you put as much effort into the markup as you do the design, and it means you care about what happens when any user-agent enters your site (this includes search-bots). And, if you hand code like me, every time your able to validate a site that much quicker - your ego gets that little boost it needs.
So after playing around with rounded corners in CSS (which are supported by both FireFox and Safari), the CSS Validate tool hated my CSS. It not only hated my CSS, it told me that I was crazy for putting such non-sense into my stylesheet.
It's been pretty widely accepted to place IE6 and 7 workarounds into a separate stylesheet, and have that stylesheet called via a IE conditional statement in the header of you document. After thinking about my quandary for just a moment, it occurred to me that I take out all my FireFox and Safari specific styles and place those in a similar type conditional CSS - thus eliminating the CSS Validation from even seeing those styles.
So depending on the language your using (I currently use PHP for my personal projects), you could add a statement that looks like this;
<?php
$agent = strtoupper($_SERVER['HTTP_USER_AGENT']);
$version = substr($_SERVER['HTTP_USER_AGENT'], $f, 5);
if ($version == "Mozil") {
echo '<link rel="stylesheet" href="http://www.mysite.com/path/to/css/round.css" type="text/css" media="screen" />';
}
?>
And that's it. Not the most elegant code, but it was good enough to get this;
