在样式表中使用 media="print" 与 @media 打印声明的权衡是什么？答案

【问题标题】：What are the trade-offs of using media="print" vs an @media print declaration in the stylesheet?在样式表中使用 media="print" 与 @media 打印声明的权衡是什么？
【发布时间】：2013-01-15 16:05:58
【问题描述】：

我正在尝试弄清楚如何构建我的 CSS 文件（目前已经很多），我想知道是否有任何实际区别：

<link href="blah.css" media="print" rel="stylesheet" type="text/css" />

或拥有：

@media print {
   definitions
}

我是从浏览器的角度问的。两者都得到同样的支持吗？我可以不关心吗？

或者是一个明显的优越？

【问题讨论】：

标签： css printing media-queries

【解决方案1】：

根据http://www.w3.org/TR/css3-mediaqueries/，自 HTML4 和 CSS2 起就支持在 CSS 文件中使用 @media ...。

“‘打印’和‘屏幕’媒体类型是在 HTML4 中定义的。 HTML4 中媒体类型的完整列表是：“听觉”、“盲文”、 “手持”、“打印”、“投影”、“屏幕”、“tty”、“电视”。 CSS2 定义同一个列表，弃用“aural”并添加“embossed”和“speech”。此外，“all”用于指示样式表适用于所有媒体类型。”

CSS3 扩展了@media ... 的使用，也允许使用媒体查询，这些也记录在我之前链接的 w3.org 页面上。

此处还记录了媒体类型的使用：

http://www.w3schools.com/css/css_mediatypes.asp

以下是对媒体查询的支持列表：

http://www.javascriptkit.com/dhtmltutors/cssmediaqueries.shtml

据我所知； @media screen, print, ... 的使用得到了非常广泛的支持，但是您可以使用的较新的媒体查询仅在与 CSS3 兼容的浏览器中受支持。

编辑：这里有更多相关信息：

http://www.w3.org/TR/CSS2/media.html#x2

我不会担心支持以这种方式使用@media ...。

【讨论】：

感谢您的回答。你知道哪些资源记录了哪些浏览器将支持每个资源吗？
我刚刚意识到，我的答案是错误的！我现在要纠正它，一会儿......编辑：我现在已经更新了答案。

【解决方案2】：

我只会使用@media print，如果用户决定打印，您就不必额外调用样式表。您唯一要放弃的是样式表上额外的几个 KB，但我认为这对于整合所有样式来说是一个不错的代价。

【讨论】：