针对 Firefox Quantum 的条件 CSS 规则

Question

在涉及 CSS 时，我们遇到了针对 Firefox Quantum 的问题。我们知道以下几点：

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

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

Answer 1

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

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

Answer 2

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

这是一个：

• 在 Quantum CSS 中，calc() is supported everywhere that the spec explains it should be (bug 1350857)。在 Gecko 中则不然。

您可以使用 @supports 和 calc(0s) 表达式以及 @-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';
    }
  }
}

请注意，Fx Quantum 59 和 60 不允许在面向公众的文档中使用 @-moz-document，但版本 61 恢复了 @-moz-document url-prefix() hack 的功能，允许其按预期工作。但是，版本 60 是 ESR 版本，因此如果您需要定位该版本，则需要将 @-moz-document 规则更改为媒体查询：

@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，如上面的概念验证所示。