@document

这是一个实验中的功能
此功能某些浏览器尚在开发中,请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订,所以在未来版本的浏览器中该功能的语法和行为可能随之改变。

@document CSS at-rule 根据文档的 URL 限制其中包含的样式规则的作用范围。它主要是为用户定义的样式表(UserStyle)而设计的,但也可以在作者定义的样式表上使用。

@document url("https://www.example.com/") {
  h1 {
    color: green;
  }
}

语法

@document 规则可以指定一个或多个匹配函数。如果任何功能适用于给定的 URL,则该规则将对该URL生效。可用的函数如下:

  • url(),匹配整个 URL。
  • url-prefix(),匹配文档的 URL 是否以参数指定的值开头。
  • domain(),匹配文档的域名是否为参数中指定的域名或者为它的子域名。
  • regexp(),匹配文档的 URL 是否和参数中指定的正则表达式匹配。该表达式必须匹配整个 URL。

提供给 url()url-prefix(),和 domain() 函数的参数可以不使用引号括起来。但提供给 regexp() 函数的参数必须用引号括起来。

提供给 regexp() 函数的正则表达式中的转义字符必须再次进行一次 CSS 转义。例如,一个点号(.),在正则表达式中匹配任意换行符之外的字母.如果想要匹配一个正真的点号,必须首先按照正则表达式的规则转义一次(变为 \.)然后在使用CSS的规则再转义一次(转换为\\.)。

例子

@document url(http://www.w3.org/),
          url-prefix(http://www.w3.org/Style/),
          domain(mozilla.org),
          regexp("https:.*")
{
  /* 该条CSS规则会应用在下面的网页:
     + URL为"http://www.w3.org/"的页面.
     + 任何URL以"http://www.w3.org/Style/"开头的网页
     + 任何主机名为"mozilla.org"或者主机名以".mozilla.org"结尾的网页     
     + 任何URL以"https:"开头的网页 */

  /* 让上述网页变得超级丑 */
  body {
    color: purple;
    background: yellow;
  }
}

规范

文档 状态 注释
CSS Conditional Rules Module Level 3
@document
Candidate Recommendation

浏览器兼容性

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
@document
ExperimentalNon-standard
Chrome No support NoEdge No support NoFirefox Full support 61
Prefixed Notes Disabled
Full support 61
Prefixed Notes Disabled
Prefixed Implemented with the vendor prefix: -moz-
Notes Disabled by default in web pages, except for an empty url-prefix() value, which is supported due to its use in Firefox browser detection. Still supported in user stylesheets.
Disabled From version 61: this feature is behind the layout.css.moz-document.content.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
No support 1.5 — 61
Prefixed
Prefixed Implemented with the vendor prefix: -moz-
IE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoFirefox Android Full support 61
Prefixed Notes Disabled
Full support 61
Prefixed Notes Disabled
Prefixed Implemented with the vendor prefix: -moz-
Notes Disabled by default in web pages, except for an empty url-prefix() value, which is supported due to its use in Firefox browser detection. Still supported in user stylesheets.
Disabled From version 61: this feature is behind the layout.css.moz-document.content.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
No support 4 — 61
Prefixed
Prefixed Implemented with the vendor prefix: -moz-
Opera Android No support NoSafari iOS No support NoSamsung Internet Android No support No
regexp()
ExperimentalNon-standard
Chrome No support NoEdge No support NoFirefox Full support 6IE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoFirefox Android Full support 6Opera Android No support NoSafari iOS No support NoSamsung Internet Android No support No

Legend

Full support  
Full support
No support  
No support
Experimental. Expect behavior to change in the future.
Experimental. Expect behavior to change in the future.
Non-standard. Expect poor cross-browser support.
Non-standard. Expect poor cross-browser support.
See implementation notes.
See implementation notes.
User must explicitly enable this feature.
User must explicitly enable this feature.
Requires a vendor prefix or different name for use.
Requires a vendor prefix or different name for use.

参见