What’s the difference between @import of css and html Link?

Asked

Viewed 2,820 times

12

I created a file containing css that are used in my system. I wonder what is the difference between calling css by link or by @import thus:

/* ou dentro do codEventos.css */

@import "../padrao.css";
<link rel="stylesheet" href="padrao.css">
<link rel="stylesheet" href="codEventos.css">

What are the advantages/disadvantages?

I read in a link: dont-use-import that there is a big difference in performance, since the link can carry the css in parallel making have more performance on the @import,of course it’s not all browsers that play like this.

html css

  • I can’t detail an answer right now, but if I’m not mistaken <link> will work on a basis of the page path that called it and the @import may work quite differently, ie there will be in "some cases" differences in the use of url()

2 answers

8


In theory, the only difference between them is that @import is the mechanism CSS to include a stylesheet and <link> is the HTML engine to do the same. However, each browser manipulates them in ways different, giving the <link> a clear advantage in terms of performance.

Steve Sourders wrote an extensive article on his blog, comparing the impact of both <link> and @import (and all possible combinations between them) called "don’t use @import" ("Do not use @import"). O title already says it all.

Yahoo! also mentions it as one of his best choices performance (co-authored with Steve Sourders): Choose <link> over @import. ("Choosing <link> instead of @import").

Also, use the tag <link> allows you to set pages of "preferred" style and alternatives. You can’t do this with @import.

This is a full translation of the English answer to the same question, which is https://stackoverflow.com/a/1022715/1639385

  • 1

    Good answer! #Ulyssesalves +1

  • 1

    Thank you, @Alíciatairini But the credits are actually from marketer, author of the original reply in English ;)

0

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.