@im...">

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

+7
source share
2 answers

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.

+7
source

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.
+2
source

All Articles