Welcome to WebmasterWorld Guest from 184.73.126.70

Forum Moderators: not2easy

Message Too Old, No Replies

Import or Link?

Difference between importing and linking stylesheets

   
4:08 pm on Jan 31, 2007 (gmt 0)

5+ Year Member



Hello everyone,

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.

Thanks!

5:16 pm on Jan 31, 2007 (gmt 0)

10+ Year Member



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.

5:20 pm on Jan 31, 2007 (gmt 0)

WebmasterWorld Administrator coopster is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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]

5:30 pm on Jan 31, 2007 (gmt 0)

WebmasterWorld Senior Member encyclo is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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.

However,

@import
used within a linked stylesheet is still useful for bringing in a second stylesheet from within the first.
7:03 pm on Jan 31, 2007 (gmt 0)

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month



I second what encyclo said. NN4 is obsolete, so no need to use @import. Stick with <link>.
5:50 pm on Feb 1, 2007 (gmt 0)

5+ Year Member



Thank you all! I'll go through the two articles mentionned above.
 

Featured Threads

Hot Threads This Week

Hot Threads This Month