CSS媒体查询未评估为true

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确实是我正在使用的浏览器中的上下文框。但无论出于何种原因，该媒体查询表达式显然正在评估为假。我可以使用哪些工具在运行时查看该评估。

2. 是否有人发现该媒体查询有任何问题？

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

Answer 1

Media Queries spec定义了一组您可以使用的媒体功能。虽然语法类似于属性声明，但您不能将任何CSS属性用作媒体功能，因为它不一定有意义。例如，-moz-box-sizing在媒体查询中应该是什么意思，甚至是Mozilla浏览器？

在您的情况下，由于只有Mozilla浏览器才会理解-moz-前缀，因此您可以直接将CSS规则放在主样式表中，而无需任何条件导入。