CSS

浏览器兼容性表 | @document

@document

这是一种实验技术

由于该技术的规格不稳定,请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订,所以在未来版本的浏览器中该功能的语法和行为可能随之改变。

@document CSS的规则限制了基于文档的URL中包含它的样式规则。它主要是为用户定义的样式表设计的,尽管它也可以在作者定义的样式表上使用。

@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()函数的正则表达式中的转义字符必须再次进行一次CSS转义.例如,一个点号(.),在正则表达式中匹配任意换行符之外的字母.如果想要匹配一个正真的点号,你必须首先按照正则表达式的规则转义一次 (变为 \.), 然后在使用CSS的规则再转义一次(转换为\\.).

形式语法

@document [ <url> | url-prefix(<string>) | domain(<string>) | regexp(<string>) ]# { <group-rule-body> }

例子

CSS

@document url(http://www.w3.org/), url-prefix(http://www.w3.org/Style/), domain(mozilla.org), regexp("https:.*") { /* 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" - Any page whose URL starts with "https:" */ /* Make the above-mentioned pages really ugly */ body { color: purple; background: yellow; } }

规范

在CSS条件规则模块级别3,,,@document已经延期到4级。

浏览器兼容性

FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic supportNo support1.5 (1.8)-mozNo supportNo supportNo support
regexp()No support6.0 (6.0)-mozNo supportNo supportNo support

FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support??????
regexp()No supportNo support?No supportNo supportNo support