浏览器兼容性表 | @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级。
浏览器兼容性
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Basic support | No support | 1.5 (1.8)-moz | No support | No support | No support |
regexp() | No support | 6.0 (6.0)-moz | No support | No support | No support |
Feature | Android | Chrome for Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|
Basic support | ? | ? | ? | ? | ? | ? |
regexp() | No support | No support | ? | No support | No support | No support |