浏览器兼容性表 | @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()函数的值必须用引号引起来。

提供给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

本文档系腾讯云开发者社区成员共同维护，如有问题请联系 cloudcommunity@tencent.com

最后更新于：2017-12-18