@-moz-document url-prefix()做什么？

在 Simon Collison 的 新的 响应式网页设计中，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 或 任何 URL 上运行，不是吗？那 这就是我们在这里看到的一种针对 Mozilla 专用浏览器的特定规则的方法呢？

76214 次浏览
小开
最佳答案

Any CSS at-rule that starts with @-moz- is a Gecko-engine-specific rule, not a standard rule. That is, it is a Mozilla-specific extension.

The url-prefix rule applies the contained style rules to any page whose URL starts with it. When used with no URL argument like @-moz-document url-prefix() it applies to ALL pages. That's effectively a CSS hack used to only target Gecko (Mozilla Firefox). All other browsers will ignore the styles.

See here for a list of other Mozilla-specific extensions.

小开

From 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; }
}
小开

Starting from Firefox 59 you should just use:

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

The support of -moz-prefixed version of this property have been stopped for web content, because of a bug:

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

小开

@supports (-moz-appearance:none) {...} worked for me in cases where @-moz-document url-prefix() {...} didn't.


提交答案