4

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

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

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

4

2 回答 2

10

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

这是一个：

您可以将@supportswith 与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()黑客攻击的功能，允许其按预期工作。但是，版本 60 是 ESR 版本，因此如果您需要针对该版本，您需要将@-moz-documentat-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 */
  }
}

...但是如果您需要支持更旧的版本，则需要使用 cascade，如上面的概念验证所示。

于 2017-12-13T17:06:35.437 回答
1

不，没有可靠的方法可以做到这一点。有些人可能会建议使用用户代理字符串，但这也被证明是不可靠的。

我建议您通过 javascript 或CSS 中的@supports使用功能查询或检测。

于 2017-11-30T14:47:49.047 回答