针对Firefox Quantum的条件CSS规则
在涉及CSS时，我们遇到了针对Firefox Quantum的问题。 我们知道以下几点：
@-moz-document url-prefix() {
.my-style{
}
}
...将针对所有的Firefox浏览器，但我们只是想瞄准Firefox Quantum，因为在涉及到CSS解释时，Firefox Quantum和旧版本的Firefox之间存在一些差异。 有谁知道这是怎么做到的吗？
仔细阅读Fx Quantum 57的发行说明，特别是Quantum CSS笔记，列出了Gecko和Stylo之间的许多差异，并且想到了一些窍门。
这里有一个：
calc()在规范解释它应该是的地方支持（bug 1350857）。 在壁虎它不是。 您可以使用带有calc(0s)表达式的@supports与@-moz-document结合来测试Stylo - Gecko不支持calc()表达式中的时间值，但Stylo会：
@-moz-document url-prefix() {
@supports (animation: calc(0s)) {
/* Stylo */
}
}
这是一个概念验证：
body::before {
content: 'Not Fx';
}
@-moz-document url-prefix() {
body::before {
content: 'Fx legacy';
}
@supports (animation: calc(0s)) {
body::before {
content: 'Fx Quantum';
}
}
}没有。没有可靠的方法来做到这一点。 有些人可能会建议用户代理字符串，但是这也被证明是不可靠的。
我建议你在CSS中使用功能查询或通过javascript或@supports进行检测。
链接地址: http://www.djcxy.com/p/29467.html