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

Question

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

Asked 10 years, 3 months ago

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.

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

– Guilherme Nascimento

2015/07/03 at 14:59

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

– Alicia Tairini

2017/04/13 at 01:15
1

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

– Ulysses Alves

2017/04/13 at 12:11

Browser other questions tagged html css

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

by Fernando Medeiros • **1,382** points · Answer 1 · 2015-07-03T14:27:09+00:00

There are no differences basically, the link is the html method of calling a stylesheet, the @import the one of css.

However, the browser interprets them in a different way, where the link has an advantage in terms of performance.

If you understand English check out this answer : https://stackoverflow.com/questions/1022695/difference-between-import-and-link-in-css

Hug