Question

在Simon Collison的new 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; }
}

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

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

Answer 1

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

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

有关其他Mozilla特定扩展的列表，请参阅here。

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

@supports（-moz-appearance：none）{...} 在@ -moz-document url-prefix（）{...}无效的情况下为我工作。

Answer 4

从Firefox 59开始，你应该使用：

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

由于存在错误，已针对Web内容停止了对此属性的-moz前缀版本的支持：

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

@ -moz-document url-prefix（）有什么作用？

4 个答案: