求解释，W3C 官网 CSS 引入方式

This topic created in 5555 days ago, the information mentioned may be changed or developed.

是这一段：

<link rel="stylesheet" href="/2008/site/css/minimum" type="text/css" media="handheld, all" />
<style type="text/css" media="print, screen and (min-width: 481px)">
/*<![CDATA[*/
@import url("/2008/site/css/advanced");
/*]]>*/
</style>
<link href="/2008/site/css/minimum" rel="stylesheet" type="text/css" media="handheld, only screen and (max-device-width: 480px)" />

第一，既然有 all ，前面再加个 handheld 有必要么？
第二，为什么第二句要用这种形式，而不是和其他两句一样直接 <link> ?
第三，既然第三句引入的 CSS 文件和第一句相同，而且第一句的 media 设置成了 all ，那么第三句还有必要么？

CSS

Media

type

8 replies • 1970-01-01 08:00:00 +08:00

gonghao

Feb 25, 2011

坐等规范解读、理解高手解释~

manhere

Feb 25, 2011

实现按需下载css文件，避免浪费手持设备带宽

manhere

Feb 25, 2011

参见CSS手册：Media Queries

dimlau

Feb 25, 2011

@manhere 呃……我是说第一条的 media 值是 all ，当然也包括手持设备了吧，然后第三条又专门针对手持设备重写了一次引用。既然两次引用的文件是相同的，是不是浪费？

顺便又来了问题。如果第一句和第三句引用的是不同文件。设备会不会根据先后顺序预先判断 CSS 先后顺序造成的覆盖情况，从而实现忽略前边那个 media 值是 all 的文件而只加载第三条引用的 CSS ？

fireyy

Feb 25, 2011

第一个是为了应付opera mini的特殊情况，它有个"fit to screen"的功能，默认情况一般是开启的，这样如果只设置all，它会忽略你的css，所以要额外在前面加一个handheld
第二个是因为某些浏览器不支持@import 或者 min-width，所以可以用这一点忽略一些不支持的浏览器
第三个是为了安全起见，当出现一些手持浏览器都支持前两条规则，但是我们又不想它应用/2008/site/css/advanced样式的时候，我们再用2008/site/css/minimum覆盖advanced的某些样式

SolidZORO

Feb 25, 2011

@fireyy 高手现身。果然是真正接触过多浏览器的人呐。

dimlau

Feb 25, 2011

@fireyy 哦，原来如此。
顺便，您也来了~哈哈

又顺便，单就 iPhone 来说，其实它是读了两遍 2008/site/css/minimum 的吧？

fireyy

Feb 25, 2011

@dimlau 对，我潜水较多