<link> tag vs @import

[Ingolme]

What is better? <link rel="stylesheet"> or CSS's @import rule?I've been looking around on Google, but all I find is people saying how @import isn't supported by older browsers and to use it to trick Netscape Navigator 4.x.But I don't want that kind of information. I'd like to know more technical information, like efficiency and advantages.Currently I've only been using the <link> tag just because it's what I learnt first.

[jeffman]

This is the kind of question I expect YOU to answer.

[rzea]

Me too.However, here's what I think:A. You should use @import when actually 'importing' a CSS file outside of your website.B. Use <link rel="stylesheet"> when using a local CSS file.Technical implications?Well, importing a file means your site's looks depend on a third party (could you be someone else's server, or another of your websites working properly, enough bandwidth, etc. [this would be in my opinion a major methodology fault, although there could be exceptions]).Using a local file, well, you there are no cons with this one, you know that.That's it.

[Ingolme]

This is the kind of question I expect YOU to answer.

I know, but it's just that they both have the exact same functionality. I see no difference between them, so I wanted to see other opinions. I'm not perfect, maybe some people know something about it that I don't.The <link> tag is supposed to indicate the browser that the HTML file is linked to the CSS files, the @import rule doesn't give the browser any information about your page (not in the markup sense, anyways), it just loads the CSS.Personally, I don't see any advantages or disadvantages of using either method, neither do I see anything correct or wrong about them.

[jeffman]

Okay. I've done some thinking. First, I can't imagine any efficiency differences. The @ rule works at the browser level, so you're no matter which way you go, the browser has to send the same number of HTTP requests.You read about handling older browsers with the @ rule, but that's a hack, not the intention.I don't see this rule having much purpose for the one-person design shop.But say you're at the big corporate level, like Yahoo or a newspaper, with a lot of sections of your document functioning as autonomous units. Things the big boss requires you to have on your page that you don't design. You could have links to a lot of style sheets that control each of these units. But so much easier for you the designer to have just one link that never has to change. Then SOMEONE ELSE writes the style sheets for the little units, updating as needed. And still a third party decides which of these other style sheets get imported into your master sheet.In short, with a link to one style sheet, you can let a lot of different people control the styles for content you may be including but don't have control over.This seems like a logical consequence of the movement away from frames. If you included a lot of external content by way of iFrames, you'd be importing whole documents into your page, and they could come with their own style sheets. But that's the past, not the future.If you have something like this:<div id="bobs_content"><?php include ("path/bob.php") ?></div>then Bob's style sheet isn't coming along with his content (unless corporate insists everyone use inline styles, but who wants that?). All you're getting is a document fragment with no style information. So, to save you the trouble of phoning Bob and finding out which style sheets go with his content this week, Bob himself has the ability to import his style sheets into the master style sheet that you already link to. You as the designer never have to be aware of it. This keeps you from having to update your own pages every time Bob makes a change for his stuff, and it also gives Bob and his people the ability to make fast, portable changes. Instead of constantly adding and deleting 200 lines of CSS to the master style sheet, Bob writes a separate style sheet and (if he needs to) emails a new @rule to the person who maintains the master.I hope some of that makes sense.

[Guest FirefoxRocks]

I think what Deirdre's Dad said is correct to a certain extent, but reading the CSS2 specification it says so right there:

Any @import rules must precede all other rules (except the @charset rule, if present).

It's like importing a stylesheet with everything marked !important.

[Ingolme]

By "precede" I think they're referring to the fact that it must be written before any other rules, not that it has precendence.

[Guest FirefoxRocks]

By "precede" I think they're referring to the fact that it must be written before any other rules, not that it has precendence.

Opps, that was my misinterpretation.

[jlhaslip]

Is DD's reply the definitive reply to this Thread?Personally, I have never used the @import... but I was pretty much a Rookie while netscape 4 was important enough to worry about.Good analysis about the use of the @import in a larger corporate environment, though.

[jeffman]

Is DD's reply the definitive reply to this Thread?

Doesn't seem likely. I was half-asleep and writing off the top of my head.

[Ingolme]

I'll keep using the <link> tag, I'm more comfortable with it.In the end, I think neither of them is better or worse. One just may be more practical than another in certain situations.