• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

CSS - @import or <link>?

James

Well-known member
#1
I'm still debating with myself about this one. I'm not sure whether @import or <link> works best, or both the same.

I heard a rumour that @import works better for caching, but I'm not sure.

Which method do you use?
 
#2
I think link is the better choice because it's clean and nice and the order doesn't matter. The import rules must come before all the others.
 

Shadab

Well-known member
#4
I think link is the better choice because it's clean and nice and the order doesn't matter.
Brandon, the order in which you specify the stylesheets does matter!

The rules specified in stylesheets linked later in the webpage take precedence over the rules in stylesheets linked earlier (unless you break this precedence by using !important). That's the whole point of 'C' in css: Cascade :)
 
#5
Brandon, the order in which you specify the stylesheets does matter.

The rules specified in stylesheets linked later in the webpage take precedence over the rules in stylesheets linked earlier (unless you break this precedence by using !important). That's the whole point of 'C' in css: Cascade :)
I guess either the article was wrong, or i misinterpreted it :D Im going to go with me misinterpreting it.

A STYLE block can contain multiple @import rules, but @import rules must precede all
other rules.I’ve seen cases where this is overlooked, and developers spend time
trying to determine why the stylesheet isn’t loaded from an @import rule.For this
reason, I prefer using the LINK tag (one less thing to keep track of).Beyond the easier
syntax, there are also performance benefits to using LINK instead of @import.The
@import rule causes the blank white screen phenomenon, even if used in the document
HEAD, as shown in the following example
Since import rules must precede all other rules [order matters] and this is a comparison of the two, i assumed the LINK must be the opposite [order doesn't matter]
 

Shadab

Well-known member
#6
I guess either the article was wrong, or i misinterpreted it :D Im going to go with me misinterpreting it. Since import rules must precede all other rules [order matters] and this is a comparison of the two, i assumed the LINK must be the opposite [order doesn't matter]
The article is explaining that the @import rules must be specified right at the top of a <style> block or an external stylesheet. So while something like this would work:
Code:
@import url('style.css');
.foo { font-size: 48px; }
This won't:
Code:
.foo { font-size: 48px; }
@import url('style.css');
The browsers (Firefox & IE, in my case) silently ignore the @import rule when it's not at the beginning of a block. It's important to note that the rules in the imported and linked stylesheets still cascade as usual, though.
 

dutchbb

Well-known member
#10
My understanding is that @import is mainly used for importing one style sheet into another. You can use it to hide CSS from browsers that don't support @import.
 

Forsaken

Well-known member
#17
You do realize the browsers that didn't support @import are about 13 (Nearly 14) years old.

The only reason IE6 is still widely used is due to corporate use, due to needing to support legacy programs.

Netscape is long gone, IE5.5 was created for previous OS's (Before XP).
 
#18
You do realize the browsers that didn't support @import are about 13 (Nearly 14) years old.

The only reason IE6 is still widely used is due to corporate use, due to needing to support legacy programs.

Netscape is long gone, IE5.5 was created for previous OS's (Before XP).
That isn't a source but ok.