针对 Firefox Quantum 的条件 CSS 规则

Question

我们在针对 CSS 时遇到了针对 Firefox Quantum 的问题。我们知道以下内容：

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

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

Answer 1

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

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

Answer 2 · 值，但是Stylo 做：

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

这是一个：

In Quantum CSS, calc() is supported everywhere that the spec explains it should be (bug 1350857). In Gecko it is not.

您可以将 @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 不允许在面向 public 的文档中使用 @-moz-document，但版本 61 恢复了 @-moz-document url-prefix() hack 的功能，允许它作为故意的。然而，版本 60 是 ESR 版本，因此如果您需要以该版本为目标，则需要将 @-moz-document at 规则更改为媒体查询：

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

针对 Firefox Quantum 的条件 CSS 规则

Conditional CSS rule targeting Firefox Quantum

css

firefox

css-hack

firefox-quantum