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 type=”text/css”>@import url(Path To stylesheet.css)</style>
Use of Link
<link rel=”stylesheet” type=”text/css” href=“Path To stylesheet.css” />
What's the best way to do it? and why? Thanks!
Edit: There is some thoughts here
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.
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.
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.
@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 tag is processed more quickly than the @import rule (which is apparently somewhat slow as far as the css processing engine is concerned).
This article may be of use here: 4 methods of adding CSS to HTML: link, embed, inline and import
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.