HTML LINK媒体和CSS媒体查询之间的区别

Question

我知道有两种方法可以添加媒体查询:

HTML链接:

<LINK REL="stylesheet" TYPE="text/css" MEDIA="(max-width: 1024px)" HREF="foo.css">

CSS:

@media all and (max-width: 1024px) {
    ......
}

我已阅读文档,我理解这两种方法之间的明显区别.但是,以下是2个问题我怀疑你是否可以澄清:

1)浏览器是否以不同于CSS媒体查询的方式处理HTML媒体链接？我的意思是,我知道如果在css中添加CSS媒体查询,所有css文件都会被下载到所有设备,并且当浏览器解释编译的css时,只有相应的媒体查询才会生效.但是如果媒体链接是用HTML添加的,那么它是否意味着浏览器只会在匹配指定宽度的设备时才下载foo.css？与Css媒体查询相比,浏览器处理HTML媒体链接的方式是否存在差异,或者它们是否完全相同但只是添加到网页的不同方式？

2)假设foo.css还有1024px以外的较小宽度的媒体查询,如下所示:

body {
   padding: 10px;
}     
@media all and (max-width: 900px) {
    body {
       padding: 5px;
    }     
}    
@media all and (max-width: 800px) {
    body {
       padding: 0px;
    }     
}

如果使用HTML链接添加上述文件,如下所示:

<LINK REL="stylesheet" TYPE="text/css" MEDIA="(max-width: 1024px)" HREF="foo.css">

这会成为浏览器看待它的嵌套媒体查询吗？我不明白的是,如果使用html链接添加上述内容,我不知道浏览器是否真的会像这样看起来无效:

@media all and (max-width: 1024px) {
    body {
       padding: 10px;
    } 

    @media all and (max-width: 900px) {
        body {
           padding: 5px;
        } 

    }

    @media all and (max-width: 800px) {
        body {
           padding: 0px;
        } 

    }

}

所以我的问题是,如果我在使用HTML媒体链接添加的css文件中有进一步的媒体查询,那有效吗？

编辑: 我在桌面上使用chrome查看了开发人员工具,我可以看到即使从桌面设备浏览也会下载平板电脑文件:

1)因此对于问题1,假设所有浏览器都包含较旧的浏览器并且移动浏览器执行相同的操作即使下载所有文件即使它们被放置在HTML链接中也是安全的吗？

2)对于问题2,我可以看到当浏览器屏幕调整为平板电脑宽度时,chrome确实使用了平板电脑css内的媒体查询.在html中以1024px链接的css文件被视为media ="(max-width:1024px)".但那么,这不意味着平板电脑的css文件中的媒体查询实际上是嵌套的媒体查询吗？虽然它有效但不是逻辑错误吗？是否有一些更严格的浏览器不认为这是有效的？

Answer 1

以下是W3C 对此的评价:

media属性说明资源适用于哪种媒体.该值必须是有效的媒体查询.

[...]

但是,如果链接是外部资源链接,则media属性是规定性的.当媒体属性的值与环境匹配且其他相关条件适用时,用户代理必须应用外部资源,否则不得应用它.

注意:外部资源可能在此范围内定义了进一步限制,以限制其适用性.例如,CSS样式表可能包含一些@media块.本规范不会覆盖此类进一步的限制或要求.

我使用以下标记测试了Chrome中的行为:

<link rel="stylesheet" href="ge-960.css" media="screen and (min-width: 960px)">
<link rel="stylesheet" href="lt-960.css" media="screen and (max-width: 959px)">

• 显然,无论屏幕分辨率如何,Chrome都会下载所有CSS文件.
• 但是,它仅应用匹配样式表中的规则
  • 它尊重@media样式表中的所有匹配规则

Answer 2

关于样式表下载,这是当前的规范草案所说的:

用户代理应该重新评估媒体查询以响应用户环境的变化,例如,如果设备从横向到纵向平铺,并相应地改变依赖于那些媒体查询的任何构造的行为.

这意味着您不能只评估每个媒体查询,然后下载相应的样式表,因为环境可能会发生变化,导致重新评估这些媒体查询.我认为它可以进行优化,但是现在所有浏览器都会下载所有样式表,而不管媒体查询.

对于第二个问题,规范没有提到HTML和CSS声明的媒体查询之间的任何区别.自CSS3起允许嵌套媒体查询,并且@media已经标记的样式表中的put -rules media="…"应该与纯CSS嵌套媒体查询相同.