Difference between @import and <link rel>

[asantos]

Hi.
Is there a performance difference between:

A)
<link rel="stylesheet" type="text/css" media="screen" href="temp.css" />

...and...

B) @import url("temp.css");

[dwighty]

My understanding is that the <link.... /> is better understood by webbrowsers where as the @ import is not understood by the older browsers such as netscape 4.x etc

Personally I would use the @import especially when adding several style sheets.

[kiwibrit]

Using the two together does mean you can have simple styling for all browsers, and extra styling for more modern ones. OTOH, very few if your users will be using Netscape or IE4.

[Fotiman]

I believe you also run the risk of seeing a Flash Of Unstyled Content (FOUC) using the import method if you don't have some JavaScript tag as well (if memory serves me correctly).

I just use the link method. It's reliable. Though some times I might use link to link in a main CSS file, and that CSS file might use import to pull in some other CSS files. Of course, you could just import the main one as well, but like I said there's an FOUC risk.

[encyclo]

There is no real performance difference between the two methods (as this was your initial question). The @import method became popular a few years back as a way of hiding styles from version 4 browsers (specifically Netscape 4). However, these browsers are dead now, and as Fotiman says above, there is the "FOUC" problem in IE6 when using @import.

I usually use the

link

element within the HTML document, reserving @import when calling a second stylesheet from within another stylesheet.

[henry0]

encyclo,
since I often use two sheets I like the idea
but do not figure its coding
how do I insert the @ second sheet
within for ex:
<<<
<link rel="stylesheet" type="text/css" media="screen" href="temp.css" />
>>>

[encyclo]

You can use

@import

within your existing stylesheet - the only restriction is that the

@import

must precede any other CSS rules.

So your temp.css file will look like this:

@import "other.css";

html {
margin:0;
/* other rules follow */
}

etc.

[henry0]

Got it, thanks