针对Firefox Quantum的条件CSS规则

Question

在CSS方面,我们遇到了针对Firefox Quantum的问题.我们知道以下内容:

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

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

Answer 1

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

这是一个:

• 在Quantum CSS中,calc()在规范解释它应该是的任何地方都支持(bug 1350857).在Gecko它不是.

可以使用@supports与calc(0s)结合表达@-moz-document以测试柱花草-壁虎不支持在<时间>值calc()表达式,但柱花草的作用:

@-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-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 */
  }
}

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