Menu
The @import rule allows you to import a style sheet into another style sheet. The @import rule must be at the top of the document (but after any @charset declaration). The @import rule also supports media queries, so you can allow the import to be media-dependent.
<link> is preferred in all cases over @import , because the latter blocks parallel downloads, meaning that the browser will wait for the imported file to finish downloading before it starts downloading the rest of the content.
Yes, always use @import ! It works GREAT as a modern solution to using CSS.
The :link CSS pseudo-class represents an element that has not yet been visited. It matches every unvisited <a> or <area> element that has an href attribute.
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.
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.
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.).
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).
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With