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

Question

在Simon Collison的新响应式Web设计中,在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; }
}

这实际上是做什么的？我用Google搜索了@ -moz-document url-prefix()并找到了在userchrome中使用的引用,但没有找到标准网站样式表.

它通常有一个作为参数传入的URL,然后将声明的内容限制为该URL.但是,在Colly的网站上,没有传递任何参数.这表明声明是在当前URL或任何 URL上运行的,不是吗？所以也就是我们现在看到针对Mozilla的只能用一定的规则的浏览器的方式？

Answer 1

任何以规则开头的CSS规则@-moz-都是特定于Ge​​cko引擎的规则,而不是标准规则.也就是说,它是特定于Mozilla的扩展.

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

请参阅此处以获取其他特定于Mozilla的扩展的列表.

Answer 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; }
}

Answer 3

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

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

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

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