针对Firefox Quantum的条件CSS规则

问题描述

限时删除！！

在涉及CSS时，我们遇到了针对Firefox Quantum的问题.我们知道以下内容:

We are having issues targeting Firefox Quantum when it comes to CSS. We know that the following:

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

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

...will target all Firefox browsers, but we just want to target Firefox Quantum, since there are some differences between Firefox Quantum and older versions of Firefox when it comes to CSS interpretation. Does anyone know how to do that?

推荐答案

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

Perusing the release notes for Fx Quantum 57, specifically Quantum CSS notes, a number of differences between Gecko and Stylo are listed, and a few hacks come to mind.

这里是一个:

您可以将@supports与calc(0s)表达式结合使用，并将@-moz-document与@-moz-document结合使用以测试Stylo — Gecko不支持calc()表达式中的< time>值，但Stylo可以:

You can use @supports with a calc(0s) expression in conjunction with @-moz-document to test for Stylo — Gecko does not support <time> values in calc() expressions but Stylo does:

@-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规则更改为媒体查询:

Note that Fx Quantum 59 and 60 disallowed the use of @-moz-document in public-facing documents, but version 61 restores functionality for the @-moz-document url-prefix() hack, allowing this to work as intended. Version 60 is an ESR release, however, so if you need to target that version, you'll need to change the @-moz-document at-rule to a media query:

@media (-moz-device-pixel-ratio) {
  @supports (animation: calc(0s)) {
    /* Stylo */
  }
}

仅将Firefox的旧版本作为目标是有些棘手的-如果您只对支持@supports的版本(Fx 22及更高版本)感兴趣，则只需@supports not (animation: calc(0s)):

Targeting only legacy versions of Firefox is a little tricky — if you're only interested in versions that support @supports, which is Fx 22 and up, @supports not (animation: calc(0s)) is all you need:

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

...但是如果您需要甚至支持较旧的版本，则需要的支持.

... but if you need to support even older versions, you'll need to make use of the cascade, as demonstrated in the proof-of-concept above.

这篇关于针对Firefox Quantum的条件CSS规则的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

1403页，肝出来的..