120

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!

VXp
  • 10,307
  • 6
  • 25
  • 40
Omar Abid
  • 14,746
  • 24
  • 72
  • 105

9 Answers9

145

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.

Dave Powers
  • 1,510
  • 2
  • 23
  • 26
mercator
  • 27,075
  • 8
  • 59
  • 71
6

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

Dave Powers
  • 1,510
  • 2
  • 23
  • 26
zenazn
  • 13,887
  • 2
  • 34
  • 26
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.

merkuro
  • 5,989
  • 2
  • 24
  • 28
5

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)

Ape-inago
  • 1,808
  • 1
  • 12
  • 27
2

This article may be of use here: 4 methods of adding CSS to HTML: link, embed, inline and import

Matthew James Taylor
  • 4,459
  • 5
  • 26
  • 32
  • 1
    Quote: "Let's imagine we have a 1000 page website and we link to a CSS file from every page on the site. Now let's imagine we want to add a second CSS file to all of those pages. We could edit all 1000 HTML files and add a second CSS link or a much better way would be to import the second CSS file from within the first file. We just saved ourselves many hours of work!" – Casebash Oct 01 '10 at 02:18
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.

Barry Gallagher
  • 5,865
  • 4
  • 24
  • 30
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).

Venryx
  • 8,962
  • 7
  • 50
  • 61
Gabriel Hurley
  • 37,744
  • 11
  • 57
  • 87
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.

Silas S. Brown
  • 1,109
  • 1
  • 12
  • 16
-1

one html, the other css code If you haven't used saddle html tags then you need to use @import

cavad
  • 11
  • 2