css - 针对 Firefox Quantum 的条件 CSS 规则

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

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

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

最佳答案

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

这是一个:



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

关于css - 针对 Firefox Quantum 的条件 CSS 规则，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/47575563/