CSS import or <link rel...> with "media" attribute

Question

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

Answer 1

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.