Question

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

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

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

Answer 1

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

这是一个：

在Quantum CSS中，calc() is supported everywhere that the spec explains it should be（bug 1350857）。在Gecko中它不是。

您可以将@supports与calc(0s)表达式结合使用@-moz-document来测试Stylo - Gecko不支持＆lt; time＆gt; calc()表达式中的值，但Stylo会：

@-moz-document url-prefix() {
  @supports (animation: calc(0s)) {
    /* Stylo */
  }
}

这是一个概念验证：

＆＃13;

body::before {
  content: 'Not Fx';
}

@-moz-document url-prefix() {
  body::before {
    content: 'Fx legacy';
  }

  @supports (animation: calc(0s)) {
    body::before {
      content: 'Fx Quantum';
    }
  }
}

＆＃13;

请注意，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))就是您所需要的：< / p>

@-moz-document url-prefix() {
  @supports not (animation: calc(0s)) {
    /* Gecko */
  }
}

...但如果您需要支持更旧的版本，则需要make use of the cascade，如上面的概念验证所示。

Answer 2

没有。没有可靠的方法来执行此操作。有些人可能会建议用户代理字符串，但这也是has been shown to be unreliable。

我建议您在CSS中使用feature queries or detection或在CSS中使用@supports。

针对Firefox Quantum的条件CSS规则

2 个答案: