133

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">

7 Answers 7

156

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.

0
7

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.).

3
  • 5
    To specify the media is possible for @import statements too. Jun 20, 2009 at 22:37
  • Really? I guess you could put a media type on your style tag, but that seems a bit like a hack to me.
    – zenazn
    Jun 21, 2009 at 0:37
  • 5
    You can do e.g. "@import url(style.css) screen, print", though IE7 and before don't support the media types.
    – mercator
    Jun 22, 2009 at 16:23
6

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.

6

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)

1

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.

1

@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).

0

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.

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.