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
Internet Explorer 7 Only
Other Conditions
More advanced conditions are available, such as
Safari
or
See also Detect Browser with JavaScript
<!--[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;} See also Detect Browser with JavaScript
Need assistance with your project? Universal Web Services can help.
Contact us to request a quote.
