CSS - @import or <link>?

[James]

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?

 

[Brandon_R]

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.

 

[Forsaken]

http://webdesign.about.com/od/beginningcss/f/css_import_link.htm
 
Theres not that large a difference.

@Imports main usage is the inclusion in an existing stylesheet (I use it for separating stylesheets externally).

But theres not much difference in header code. 

 

[Shadab]

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

 

[Brandon_R]

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 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]

I guess either the article was wrong, or i misinterpreted it 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:

@import url('style.css');
.foo { font-size: 48px; }

This won't:

.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.

 

[Floris]

It's very simple, use link. Put your css in a .css file.

 

[Mike]

Use <link>, because @import may give you the "flash of unstyled content" in IE: http://developer.yahoo.com/performance/rules.html#csslink

 

[Anthony Parsons]

With performance results: http://www.stevesouders.com/blog/2009/04/09/dont-use-import/

 

[dutchbb]

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]

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.

All modern browsers support @import.

 

[dutchbb]

Yes, I'm saying that you can use it on the old ones to make them ignore CSS they can not render properly.

 

[Forsaken]

Yes, I'm saying that you can use it on the old ones to make them ignore CSS they can not render properly.

There is maybe a .05% marketshare for those users.

 

[dutchbb]

Well you're right about it being not very relevant anymore, I should have made that more clear.

 

[Floris]

Still should use <link>

 

[Brandon_R]

There is maybe a .05% marketshare for those users.

Source?

 

[Forsaken]

Source?

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).

 

[Brandon_R]

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.

 

[Lee]

Why did he need a source for something that is practically common knowledge?

 

[Forsaken]

Why did he need a source for something that is practically common knowledge?

Because I call him out on his random statements that he has yet to backup once.