Browser-specific CSS
Every browser has its quirks. The CSS specification is out there, but most browsers choose to follow only a portion of it, some more than others. Given that, there are a few CSS hacks that can be used to apply certain styles to a specific browser.
Internet Explorer 6 Only
<!--[if IE 6]>
<style type="text/css" media="all">@import url(/IE6Fixes.css);</style>
<![endif]-->
Internet Explorer 7 Only
<!--[if IE 7]>
<style type="text/css" media="all">@import url(/IE7Fixes.css);</style>
<![endif]-->
Other Conditions
More advanced conditions are available, such as
<!--[if IE]>
All versions of Internet Explorer.
<!--[if lt IE 7]>Versions of Internet Explorer previous to version 7.
Safari
In the case of Safari browsers, you can include your CSS directly in your default CSS file, but preclude the styles with a device directive as follows:
@media screen and (-webkit-min-device-pixel-ratio:0) {
p { color: #ff0; }
}
or
:first-of-type
Safari is the only browser that seems to understand the :first-of-type pseudo class. Note, this is not future-proof, the other browsers will soon support this pseudo class.
body:first-of-type p {color:#ff0000;} Update: Firefox 3.5+ now appears to support the first-of-type pseudo class - be wary of this when attemping Safari specific css. We'd now recommend using the method above instead.
See also Detect Browser with JavaScript
