针对 Firefox Quantum 的条件 CSS 规则

Posted 2023-03-06

【中文标题】针对 Firefox Quantum 的条件 CSS 规则

【英文标题】：Conditional CSS rule targeting Firefox Quantum

【发布时间】：2018-05-14 12:09:39

【问题描述】：

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

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

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

【问题讨论】：

有区别吗？为何如此？不是我知道的。除非涉及 Microsoft 浏览器，否则很少有必要针对浏览器版本进行定位。您应该查看@supports 或（忘记了兼容性检查的术语）。

问题不在于对CSS样式的解释有没有区别。问题是是否有一些 CSS 代码专门针对 FireFox Quantum。

任何编写 html/CSS 相当长的时间的人都知道浏览器并不完美，特定浏览器的特定版本可能存在错误，否则会破坏他们的标准合规性声明，进而破坏功能检测。是的，尽可能使用功能检测，但有时它不起作用，因为浏览器声称支持的某些功能在 60 版中可以正常工作，但在 61 版中中断。对于这类事情，Chrome 比任何东西都要糟糕得多其他浏览器，但这并不意味着 Firefox 没有自己的错误可言。

在从 WebKit 到 Blink 的过渡中，我们不得不处理一次，在从 Trident 到 EdgeHTML 的过渡中，我们不得不处理第二次 - 从 Gecko 过渡时必须处理同样的事情是不是太不合理了？去 Stylo？

【参考方案1】：

没有。没有可靠的方法可以做到这一点。有些人可能会建议用户代理字符串，但这也是has been shown to be unreliable。

我建议你通过 javascript 使用 feature queries or detection 或在 CSS 中使用 @supports。

【讨论】：

感谢您的提示。 @supports 可能是正确的道路 - 这里的挑战是找到一个 CSS 功能，该功能仅在 FireFox Quantum 中可用，而在以前的 FireFox 版本中不可用。

【参考方案2】：

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

这是一个：

在 Quantum CSS 中，calc() is supported everywhere that the spec explains it should be (bug 1350857)。在 Gecko 中则不然。

您可以使用 @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 规则更改为媒体查询：

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

【讨论】：

@itoctopus：没问题。在 Rob 对另一个问题发表评论之前，我不知道您的问题 - 我回答了这个问题，所以我合并了两个问题。以防你想知道我 10 小时前的回答是从哪里来的。

@itoctopus 在某个地方，在另一个问题中，我提到了一些关于这是一个滑坡，但是，依靠旧浏览器的遗留或不受支持的部分来使新标记在新浏览器中工作应该就像我现在输入这条评论一样肮脏。

从 Firefox 59 开始 @-moz-document 将不再适用于网络内容。假设我正确理解bugzilla.mozilla.org/show_bug.cgi?id=1035091。

@Fencer：是的，没错。我将不得不研究一个替代方案。 （您也可以选择不考虑 57 和 58，只需使用 @-moz-document 来区分旧版本和 59+。）

我们又来了，证明了我今天的回答中有人反对的观点。这是一个很滑、不可靠的斜坡。