|Import or Link?|
Difference between importing and linking stylesheets
First post. This forum is great!
When using CSS, what would be the pros and cons of importing the sheet VS linking the sheet. Should I prefer one method over the other? I've always linked them so far, but only recently have I wondered about the difference.
Welcome to Webmaster World.
Some of the main differences between <link /> and @import include:
- Older browsers, most notably NS4, don't understand @import. Is can actually be a good thing as NS4, et al, don't understand many styles anyway and will either ignore some of them (which can be worse as many times multiple styles need to work together to create an affect), mangle them, or crash. One technique is to feed NS4 some style which it understands and hide the rest with an @import. Nowadays, this is an issue for much less than 1% of users and can safely be ignored (of course your site may be an exception, so it helps to check the logs).
- <link /> is html, while @import is css. This means that while a <link /> goes in the <head>, @import goes in a style sheet. This can be either internal style sheets (<style></style>) or external ones (styles.css). In other words, an external style sheet can import other style sheets.
- There's lack of (read: IE doesn't) support for media types using @import.
- <link /> has other uses besides style sheets.
- Iirc, IE may have a flash of unstyled content if there isn't a <link /> statement (having both isn't a problem).
That what I could recall. If there are any others which I missed, I'm sure someone else will fill in the gaps.
Welcome to WebmasterWorld, fred.
A quick search [google.com] over the forums will turn up quite a few discussions that may be of interest, including ...
Making Style Sheets Work in NN4 [webmasterworld.com]
Difference between @import and <link rel> [webmasterworld.com]
Welcome from me too, fred! If you're using
link now, that's the best solution - the
@import method was a workaround for older browsers such as Netscape 4. As none of those browsers are relevant any more, the workaround isn't needed.
@import used within a linked stylesheet is still useful for bringing in a second stylesheet from within the first.
I second what encyclo said. NN4 is obsolete, so no need to use @import. Stick with <link>.
Thank you all! I'll go through the two articles mentionned above.