CODEWITHSUNDEEP
css
Giraldo
Giraldo

Reputation: 547

Including CSS with `<link>` or `@import` - which is better?

i have a website and i have multiple css style sheet for print, tv, screen, handheld etc...

i want to know which one of these method is better to use (performance, usability, etc...)

<link href="all.css" media="all" type="text/css" />
<link href="handheld.css" media="handheld" type="text/css" />
<link href="tv_print.css" media="tv, print" type="text/css" />

or

<style type="text/css">
    @import url("all.css") all;
    @import url("handheld.css") handheld;
    @import url("tv_print.css") tv, print;
</style>

thank you

Upvotes: 17

Views: 967

Answers (1)

Rich Bradshaw
Rich Bradshaw

Reputation: 72975

The first method (link) is the best.

The main reason is that there is a bug in IE 6,7 and 8 (not sure about 9 or higher) means that when you use @import in conjunction with link the files are loading in series rather than in parallel. This can slow things down a lot when using more than one style sheet.

Just using @import downloads in series, but the order isn't guaranteed, meaning that if there is a reset for instance, that may or may not be applied first.

This article has a good summary: http://www.stevesouders.com/blog/2009/04/09/dont-use-import/

Upvotes: 20

Related Questions