Question

在页面中包含CSS的最佳方法是什么？为什么？

例如：

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

或

<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" />

据我所知@import在古代浏览器中不起作用，这可能是一个优势，因为这些浏览器只显示文本而不是不可读的CSS混乱（使用链接时）。

Answer 1

已经多次讨论过，你可以在这里阅读更多内容：

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

提一些......

我个人从不使用@import作为性能影响。

Answer 2

实际上两者都实现了相同的目标，但存在一些细微差别。即：

IE6及更早版本和Netscape 4
@import允许在单个链接或样式元素中导入多个样式表（如果需要）
link允许指定备用样式表，FireFox，Safari和Opera等浏览器可以允许用户切换到。如果使用JavaScript切换器，IE也支持此功能。这通常用于可访问性。

CSS导入或带有“media”属性的<link rel ... =“”/>

2 个答案: