针对Firefox Quantum的条件CSS规则-Java 学习之路

在CSS方面，我们遇到了针对Firefox Quantum的问题 . 我们知道以下内容：

@-moz-document url-prefix() { 
    .my-style{
    }
}

...将针对所有Firefox浏览器，但我们只想定位Firefox Quantum，因为在CSS解释方面，Firefox Quantum和旧版本Firefox之间存在一些差异 . 有谁知道这是怎么做到的吗？

2 回答

10
仔细阅读Fx Quantum 57的发行说明，特别是Quantum CSS notes，列出了Gecko和Stylo之间的一些差异，并想到了一些黑客攻击 .

这是一个：

在Quantum CSS中，calc（）支持规范所解释的任何地方（bug 1350857） . 在Gecko它不是 .

您可以将 @supports 与 calc(0s) 表达式结合使用 @-moz-document 来测试Stylo - Gecko不支持 calc() 表达式中的<time>值，但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';
    }
  }
}
```
请注意，Fx Quantum 59和60不允许在面向公众的文档中使用 @-moz-document ，但是版本61恢复了 @-moz-document url-prefix() hack的功能，允许它按预期工作 . 但是，版本60是ESR版本，因此如果您需要定位该版本，则需要将 @-moz-document at-rule更改为媒体查询：
```
@media (-moz-device-pixel-ratio) {
  @supports (animation: calc(0s)) {
    /* Stylo */
  }
}
```
仅定位旧版本的Firefox有点棘手 - 如果您只对支持 @supports 的版本感兴趣，即Fx 22及更高版本，则只需要 @supports not (animation: calc(0s)) ：
```
@-moz-document url-prefix() {
  @supports not (animation: calc(0s)) {
    /* Gecko */
  }
}
```
...但如果您需要支持更旧的版本，则需要make use of the cascade，如上面的概念验证所示 .
回复于 2024-04-29T04:11:51+08:00
0

没有 . 没有可靠的方法来做到这一点 . 有些人可能会建议用户代理字符串，但这也是has been shown to be unreliable .

我建议您在CSS中通过javascript或@supports使用feature queries or detection .

回复于 2024-04-29T04:11:51+08:00

针对Firefox Quantum的条件CSS规则

2 回答

相关问题