Difference between @import and link in CSS
Question
I'm learning some CSS to tweak my project template. I come to this problem and didn't find a clear answer on the web. Is there a difference between using @import or link in CSS?
Use of @import
<style>@import url(Path To stylesheet.css)</style>
Use of Link
<link rel="stylesheet" href="Path To stylesheet.css">
What's the best way to do it? and why? Thanks!
Solution
In theory, the only difference between them is that @import
is the CSS mechanism to include a style sheet and <link>
the HTML mechanism. However, browsers handle them differently, giving <link>
a clear advantage in terms of performance.
Steve Souders wrote an extensive blog post comparing the impact of both <link>
and @import
(and all sorts of combinations of them) called "don’t use @import". That title pretty much speaks for itself.
Yahoo! also mentions it as one of their performance best practices (co-authored by Steve Souders): Choose <link>
over @import
Also, using the <link>
tag allows you to define "preferred" and alternate stylesheets. You can't do that with @import
.
OTHER TIPS
No real difference today, but @import
is not handled correctly by older browsers (Netscape 4, etc.), so the @import
hack can be used to hide CSS 2 rules from these old browsers.
Again, unless you're supporting really old browsers, there isn't a difference.
If I were you, however, I'd use the <link>
variant on your HTML pages, because it allows you to specify things like media type (print, screen, etc.).
You can use the import command to import another CSS inside a css file which is not possible with the link command. Really old browser cannot (IE4, IE5 partially) handle the import functionality. Additionally some libraries parsing your xhtml/html could fail in getting the style sheet import. Please be aware that your import should come before all other CSS declarations.
The <link> directive can allow for multiple css be loaded and interpreted asyncronously.
the @import directive forces the browser* to wait until the imported script is loaded inline to the parent script before it can be correctly processed by it's engine, since technically it is just one script.
A lot of css minimization scripts (and languages like less or sass) will automatically concatenate linked scripts into the main script since it ends up causing less transfer overhead.
* (depends on the browser)
This article may be of use here: 4 methods of adding CSS to HTML: link, embed, inline and import
When I use the @import rule, it's generally to import a stylesheet within an existing stylesheet (although I dislike doing it to begin with). But to answer your question, no I don't believe there's any difference. Just make sure to put the URL in double quotes in order to comply with valid XHTML.
@import is generally meant to be used in an external stylesheet rather than inline like in your example. If you really wanted to hide a stylesheet from very old browsers you could use that as a hack to prevent them from using that stylesheet.
Overall, the <link>
tag is processed more quickly than the @import rule (which is apparently somewhat slow as far as the css processing engine is concerned).