V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
dimlau
V2EX  ›  问与答

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

  •  
  •   dimlau · 2011-02-25 01:12:31 +08:00 · 5065 次点击
    这是一个创建于 4831 天前的主题,其中的信息可能已经有所发展或是发生改变。
    是这一段:

    <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 ,那么第三句还有必要么?
    8 条回复    1970-01-01 08:00:00 +08:00
    gonghao
        1
    gonghao  
       2011-02-25 01:26:56 +08:00
    坐等规范解读、理解高手解释~
    manhere
        2
    manhere  
       2011-02-25 01:38:11 +08:00
    实现按需下载css文件,避免浪费手持设备带宽
    manhere
        3
    manhere  
       2011-02-25 01:39:05 +08:00
    参见CSS手册:Media Queries
    dimlau
        4
    dimlau  
    OP
       2011-02-25 09:42:15 +08:00
    @manhere 呃……我是说第一条的 media 值是 all ,当然也包括手持设备了吧,然后第三条又专门针对手持设备重写了一次引用。既然两次引用的文件是相同的,是不是浪费?

    顺便又来了问题。如果第一句和第三句引用的是不同文件。设备会不会根据先后顺序预先判断 CSS 先后顺序造成的覆盖情况,从而实现忽略前边那个 media 值是 all 的文件而只加载第三条引用的 CSS ?
    fireyy
        5
    fireyy  
       2011-02-25 11:20:11 +08:00
    第一个是为了应付opera mini的特殊情况,它有个"fit to screen"的功能,默认情况一般是开启的,这样如果只设置all,它会忽略你的css,所以要额外在前面加一个handheld
    第二个是因为某些浏览器不支持@import 或者 min-width,所以可以用这一点忽略一些不支持的浏览器
    第三个是 为了安全起见,当出现一些手持浏览器都支持前两条规则,但是我们又不想它应用/2008/site/css/advanced样式的时候,我们再用2008/site/css/minimum覆盖advanced的某些样式
    SolidZORO
        6
    SolidZORO  
       2011-02-25 11:26:51 +08:00
    @fireyy 高手现身。果然是真正接触过多浏览器的人呐。
    dimlau
        7
    dimlau  
    OP
       2011-02-25 13:04:31 +08:00
    @fireyy 哦,原来如此。
    顺便,您也来了~哈哈

    又顺便,单就 iPhone 来说,其实它是读了两遍 2008/site/css/minimum 的吧?
    fireyy
        8
    fireyy  
       2011-02-25 20:12:57 +08:00
    @dimlau 对,我潜水较多
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2264 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 04:28 · PVG 12:28 · LAX 21:28 · JFK 00:28
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.