CSS import or <link rel ...> with the "media" attribute
What is the best way to include CSS in a page and why?
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 does not work in older browsers, this could be an advantage because these browsers will display text instead of unreadable CSS mess (when using a link).
This has been discussed many times, you can read it 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 to impact performance.
Realistically, both achieve the same goal, but there are a few minor differences. Namely:
- @import is not supported in IE6 and later, and Netscape 4
- @import allows you to import multiple style sheets in a single element or style element Link
- allows you to specify an alternative stylesheet that browsers such as FireFox, Safari, and Opera can allow users to. IE also supports this when using the JavaScript switch. This is most often used to ensure accessibility.