Eric Meyer on CSS
Using @import Restrictions
If you've ever struggled with Netscape Navigator 4.x, this trick is for you. It all hinges on the fact that NN4.x doesn't understand what @import means. This is by far the most widely used trick, even though it's only good for hiding external style sheets.
Old Explorers
@import is also not understood by IE3/Win and IE4/Win, if that's a concern for you.
Consider the following style sheet:
A few things here will cause trouble or otherwise be useless in NN4.x. Most obviously, NN4.x doesn't understand a:hover rules because it was released before :hover made its way into the CSS specification. It also has trouble with :active. These aren't necessarily major problems because NN4.x will pretty much ignore these rules. There is a much bigger problem, unfortunately: The application of padding to hyperlinks.
For some reason, NN4.x seems to assume that any element that's been given padding (or borders or margins) must be a block-level element. Thus, the styles set up here will cause hyperlinks to break up whatever element they're found within and possibly overlap other pieces of the document. So you definitely can't have NN4.x seeing the padding declaration in your CSS.
Here's the solution: Take the Navigator-unfriendly styles and move them into a separate file (call it adv-styles.css, for example). That would give you:
a:link, a:visited {padding: 1px 0.5em;}
a:hover {color: red; background: yellow;}
a:active {color: yellow; background: red;}
This leaves you with a somewhat pared-down style sheet:
Now all you have to do is import the styles you just removed.
Eric Meyer on CSS: Tricking Browsers and Hiding Styles
Using @import Restrictions
If you've ever struggled with Netscape Navigator 4.x, this trick is for you. It all hinges on the fact that NN4.x doesn't understand what @import means. This is by far the most widely used trick, even though it's only good for hiding external style sheets.
Old Explorers
@import is also not understood by IE3/Win and IE4/Win, if that's a concern for you.
Consider the following style sheet:
A few things here will cause trouble or otherwise be useless in NN4.x. Most obviously, NN4.x doesn't understand a:hover rules because it was released before :hover made its way into the CSS specification. It also has trouble with :active. These aren't necessarily major problems because NN4.x will pretty much ignore these rules. There is a much bigger problem, unfortunately: The application of padding to hyperlinks.
For some reason, NN4.x seems to assume that any element that's been given padding (or borders or margins) must be a block-level element. Thus, the styles set up here will cause hyperlinks to break up whatever element they're found within and possibly overlap other pieces of the document. So you definitely can't have NN4.x seeing the padding declaration in your CSS.
Here's the solution: Take the Navigator-unfriendly styles and move them into a separate file (call it adv-styles.css, for example). That would give you:
a:link, a:visited {padding: 1px 0.5em;}
a:hover {color: red; background: yellow;}
a:active {color: yellow; background: red;}
This leaves you with a somewhat pared-down style sheet:
Now all you have to do is import the styles you just removed.
Eric Meyer on CSS: Tricking Browsers and Hiding Styles
0 Comments:
Post a Comment
<< Home