CSS 媒体查询未评估为真

Question

我正在尝试使用 @import 样式的媒体查询来包含特定于浏览器的 CSS，如下所示:

<style type="text/css">@import url(foo.css) all and (-moz-box-sizing: content-box);</style>

然后 foo.css 有:

.myStyle { -moz-box-sizing: border-box; }

我的想法是包含用于 Firefox (Gecko/Mozilla) 浏览器的 foo.css。但是，foo.css 似乎从未在 Firefox 上应用过。所以:

1. 我如何在 Firefox 中调试 @import 媒体查询未评估为 true 的原因。我已经通过“InspectQ”进行了检查，以确保 -moz-box-sizing 确实是我正在使用的浏览器中的上下文框。但无论出于何种原因，该媒体查询表达式显然评估为 false。我可以使用什么工具在运行时查看该评估。

2. 有人看到那个媒体查询有什么问题吗？

3. 是否有更常用的方法来使用 @import 样式媒体查询来检测 Mozilla 浏览器？

Answer 1

Media Queries spec定义一组您可以使用的特定媒体功能。尽管语法类似于属性声明，但您不能将任意 CSS 属性用作媒体功能，因为它不一定有意义。例如，-moz-box-sizing 在媒体查询中意味着什么，甚至对于 Mozilla 浏览器也是如此？

在你的例子中，因为只有 Mozilla 浏览器会理解 -moz- 前缀，你可以直接将你的 CSS 规则放在你的主样式表中，而不需要任何条件导入。