@-moz-document url-prefix() 有啥作用？

Posted 2023-02-21

【中文标题】@-moz-document url-prefix() 有啥作用？

【英文标题】：What does @-moz-document url-prefix() do?@-moz-document url-prefix() 有什么作用？

【发布时间】：2011-03-08 13:47:09

【问题描述】：

在 Simon Collison 的 new old Responsive Web Design 中，在 CSS 中，有几个这样的声明：

@-moz-document url-prefix() 
  .fl  float:left; margin:12px 4px 0 0; padding:0; font-size:65px;  line-height:62%;  color:#ba1820; 
  .fs  float:left; margin:12px 4px 10px 0; padding:0; font-size:65px; line-height:62%; color:#ba1820; 

这实际上是做什么的？我搜索了 @-moz-document url-prefix() 并找到了在 userchrome 中使用它的参考，但不是标准站点样式表。

它通常有一个作为参数传入的 URL，然后将声明的内容限制为该 URL。但是，在 Colly 的网站上，没有传入任何参数。这表明声明正在对当前 URL 或 any URL 进行操作，不是吗？那么我们在这里看到的是一种针对特定规则的仅限 Mozilla 浏览器的方式？

【参考方案1】：

任何以 @-moz- 开头的 CSS at-rule 都是 Gecko 引擎特定的规则，而不是标准规则。也就是说，它是 Mozilla 特定的扩展。

url-prefix 规则将包含的样式规则应用于 URL 以它开头的任何页面。当与@-moz-document url-prefix() 等没有 URL 参数一起使用时，它适用于 ALL 页面。这实际上是一个 CSS hack 用于仅针对 Gecko (Mozilla Firefox)。所有其他浏览器都会忽略这些样式。

请参阅 here 了解其他 Mozilla 特定扩展的列表。

【讨论】：

我稍微扩展了这个问题，因为我没有遇到关键点。我凭直觉猜到你放在这里的内容，但对传入的参数不足感到困惑。不过，我想我已经猜到了。

我在 mozilla 中针对特定字体的字母间距有问题。 （即素数）。在 chorme 中它渲染得很好，但在 Firefox 中它显示得更宽一些。所以我想减少Firefox中的字母间距，而不是chrome。我找不到这种字母间距的 moz 扩展名。

@YashVekaria 它不会是 moz 扩展，您将使用 CSS 属性。 @-moz-document url-prefix() .your-class letter-spacing: 2em;

【参考方案2】：

来自https://developer.mozilla.org/en/CSS/@-moz-document

       @-moz-document url(http://www.w3.org/),
                   url-prefix(http://www.w3.org/Style/),
                   domain(mozilla.org)
    
      /* CSS rules here apply to:
         + The page "http://www.w3.org/".
         + Any page whose URL begins with "http://www.w3.org/Style/"
         + Any page whose URL's host is "mozilla.org" or ends with
           ".mozilla.org"
       */

      /* make the above-mentioned pages really ugly */
      body  color: purple; background: yellow; 

【参考方案3】：

从 Firefox 59 开始，您应该只使用：

@document url("https://www.example.com/")

由于一个错误，该属性的 -moz-prefixed 版本已停止对 Web 内容的支持：

https://bugzilla.mozilla.org/show_bug.cgi?id=1035091

【讨论】：

@jaepage，是的，它不再起作用了。您应该使用：_:-moz-tree-row(hover), .selector 。其中.selector 是您想要的选择器。

Firefox 将支持 @-moz-document url-prefix()（带有空 url 前缀）fxsitecompat.com/en-CA/docs/2018/…

该链接现在显示 @-moz-document url-prefix()（带有空 url 前缀）“一旦重大兼容性问题得到解决，将在不久的将来删除。”实际上它似乎不再起作用了。

【参考方案4】：

@supports (-moz-appearance:none) ... 在 @-moz-document url-prefix() ... 不起作用的情况下为我工作。