7

What's the best method to include CSS in page and why?

for eg.:

<style type="text/css">
  @import "style.css" screen, tv;
  @import "print.css" print;
  @import "iphone.css" iphone;
</style>

or

<LINK rel="stylesheet" media="screen" href="style.css" type="text/css" />
<LINK rel="stylesheet" media="print" href="print.css" type="text/css" />
<LINK rel="stylesheet" media="iphone" href="iphone.css" type="text/css" />

From what i know @import doesn't work in ancient browsers, this might be a advantage because these browsers will only show text instead of a unreadable CSS mess (when using link).

Alex
  • 60,472
  • 154
  • 401
  • 592
  • `` – thirtydot Jan 26 '11 at 04:03
  • but why? what's wrong with @import? – Alex Jan 26 '11 at 04:14
  • I'm too tired currently to write the long detailed answer this deserves, so I just left a comment with what I'm fairly sure is the correct "answer". Fortunately, I don't have to write the answer: see [here](http://stackoverflow.com/questions/1022695/difference-between-import-and-link-in-css) :) – thirtydot Jan 26 '11 at 04:18
  • I think up a reason to use @import as a hack maybe once every two years, and that will diminish as old/IE usage does. For quite large/complex sites with a great deal of CSS, @import could easily help one organize better. – reisio Jan 26 '11 at 06:47

2 Answers2

7

It has been discussed many times, you can read more here:

http://www.stevesouders.com/blog/2009/04/09/dont-use-import/

Difference between @import and link in CSS

http://webdesign.about.com/od/beginningcss/f/css_import_link.htm

to mention some...

Personally I never use @import as for the performance impact.

Community
  • 1
  • 1
lepe
  • 22,543
  • 9
  • 85
  • 99
  • in the first link the author says `Looking at Figure 6, the longest bar is the four second script. Even though it was listed last, it gets downloaded first in IE. If the script contains code that depends on the styles applied from the stylesheets (a la getElementsByClassName, etc.), then unexpected results may occur because the script is loaded before the stylesheets, despite the developer listing it last.` ...sorry but that sounds ridiculous. regardless of the download order, the browser can't ignore the order the developer set. there's no way styles are applied like that – Alex Jan 26 '11 at 04:25
  • 2
    Unfortunately, there's no end to what IE can do to make things more interesting for web dev. See this article (http://developer.yahoo.com/performance/rules.html#csslink) which states "In IE @import behaves the same as using at the bottom of the page, so it's best not to use it." This is why many sites suggest loading scripts last on a page and why only running JS after the DOM is ready is good practice. – nybbler Jan 26 '11 at 04:48
2

Realistically both accomplish the same goal, but there are a few minor differences. Namely:

  1. @import is not supported in IE6 and older and Netscape 4
  2. @import allows multiple style sheets to be imported in a single link or style element, if desired
  3. link allows specifying an alternate stylesheet, which browsers like FireFox, Safari, and Opera can allow users to switch to. IE also supports this if using a JavaScript switcher. This is most often used for accessibility.
nybbler
  • 4,643
  • 26
  • 23