@-moz-document url-prefix() 有什么作用? [英] What does @-moz-document url-prefix() do?

问题描述

在 Simon Collison 的 new 旧响应式网页设计中，在 CSS 中，有有几个这样的声明:

In Simon Collison's new old Responsive Web Design, in the CSS, there are several declarations like this:

@-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 中使用的参考，但没有找到标准站点样式表.

What does this actually do? I've googled for @-moz-document url-prefix() and have found references for its use within userchrome but not standard site stylesheets.

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

It usually has a URL passed in as an argument which then restricts the content of the declaration to that URL. However, on Colly's site, there is no argument being passed in. This would indicate that the declaration is operating on the current URL, or any URL, no? So is what we're seeing here a way of targeting Mozilla-only browsers with certain rules?

推荐答案

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

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.

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

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.

请参阅此处了解其他 Mozilla 特定扩展的列表.

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

这篇关于@-moz-document url-prefix() 有什么作用?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！