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">
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.
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)
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).
Microsoft Internet Explorer 9 (MSIE9) doesn't seem to handle @import properly. Observe these entries from my Apache log (IP address hidden but whois said it was owned by Microsoft itself): the main HTML linked to screen.css which had
@import url("print.css") print;
@import url("speech.css") aural;
which I am now about to change to link elements in the HTML, because it seems MSIE9 issues two incorrect requests to the server, getting 404 errors I could do without:
[ip] - - [21/Dec/2019:05:49:28 +0000] "GET /screen.css HTTP/1.1" 200 2592 "https://ssb22.user.srcf.net/zhimo/"; "Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Trident/5.0; Trident/5.0)" ssb22.user.srcf.net
[ip] - - [21/Dec/2019:05:49:28 +0000] "GET /url(%22print.css%22)%20print HTTP/1.1" 404 7498 "https://ssb22.user.srcf.net/zhimo/"; "Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Trident/5.0; Trident/5.0)" ssb22.user.srcf.net
[ip] - - [21/Dec/2019:05:49:28 +0000] "GET /url(%22speech.css%22)%20aural HTTP/1.1" 404 7498 "https://ssb22.user.srcf.net/zhimo/"; "Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Trident/5.0; Trident/5.0)" ssb22.user.srcf.net
There were proper requests for these files afterwards, but we can do without this "shoot at server first, parse url after" logic.
one html, the other css code If you haven't used saddle html tags then you need to use @import