When you use CSS to style your Web pages you may notice that there are certain properties that don't work as you expect in all browsers. The most common way to deal with that is to write browser-specific cascading style sheets and then use JavaScript to browswer-sniff. But you can also use bugs in these same browsers to hide your style sheets from various browsers.
These tricks work because the browsers are supposed to ignore items that they don't recognize. However, this can have strange results so always test your pages in multiple browsers before presenting them to the world.
@import
Using the @import tag is a simple way to hide your CSS from older browsers. Netscape 4 and IE 4 (not 4.72) and lower don't support this tag - and so will ignore any style sheets that are called within it.
Media Types
Netscape 4 doesn't understand any media type other than "screen". So if you want to hide your CSS from Netscape 4, you can define the media type of "all":
<style media="all">
If you want to be trickier with your media types, you can use the @media rule to block your style sheets from more browsers. @media is not supported by Netscape 4 or IE 4 (and 5 for Mac).
CSS 2 Selectors
Many older browsers don't support CSS 2 selectors, so you can use them to define your CSS specifically, and hide it from those browsers.
- Attribute Selectors
This is not recognized by Windows IE 6 and lower, Mac IE 5 and lower, Netscape 4, and Opera 3. - Child Selectors
Child selectors are not recognized by Windows IE 6 and lower, Mac IE 5 and lower, and Netscape 4.
Conditional Comments
If your goal is to provide different styles for Internet Explorer, you can use conditional comments to show the style sheet only to IE. In other browsers, this would appear as a comment, and so would be ignored. If you put your IE-only style sheet second, cascade rules will insure that it will take effect over the ones that cause problems in IE.
