弃用
This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the
兼容性表格
at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.
@document
CSS
at-rule
restricts the style rules contained within it based on the URL of the document. It is designed primarily for user-defined style sheets, though it can be used on author-defined style sheets, too.
@document url("https://www.example.com/") {
h1 {
color: green;
}
}
An
@document
rule can specify one or more matching functions. If any of the functions apply to a given URL, the rule will take effect on that URL. The functions available are:
url()
, which matches an exact URL.
url-prefix()
, which matches if the document URL starts with the value provided.
domain()
, which matches if the document URL is on the domain provided (or a subdomain of it).
media-document()
, with the parameter of video, image, plugin or all.
regexp()
, which matches if the document URL is matched by the
regular expression
provided. The expression must match the entire URL.
The values provided to the
url()
,
url-prefix()
,
domain()
，和
media-document()
functions can be optionally enclosed by single or double quotes. The values provided to the
regexp()
function
must
be enclosed in quotes.
Escaped values provided to the
regexp()
function must additionally be escaped from the CSS. For example, a
.
(period) matches any character in regular expressions. To match a literal period, you would first need to escape it using regular expression rules (to
\.
), then escape that string using CSS rules (to
\\.
).
@document
is currently only supported in Firefox; if you wanted to replicate using such functionality in your own non-Firefox browser, you could try using
this polyfill
by @An-Error94, which uses a combination of a user script,
data-* attributes
，和
attribute selectors
.
注意
: There is a -moz-prefixed version of this property —
@-moz-document
. This has been limited to use only in user and UA sheets in Firefox 59 in Nightly and Beta — an experiment designed to mitigate potential CSS injection attacks (See
bug 1035091
).
@document [ <url> | url-prefix(<string>) | domain(<string>) | media-document(<string>) | regexp(<string>) ]# { <group-rule-body> }
@document url("http://www.w3.org/"),
url-prefix("http://www.w3.org/Style/"),
domain("mozilla.org"),
media-document("video"),
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 standalone video
- Any page whose URL starts with "https:" */
/* Make the above-mentioned pages really ugly */
body {
color: purple;
background: yellow;
}
}
Initially
in
CSS Conditional Rules Module Level 3
,
@document
has been
postponed
to Level 4 then removed.
| Desktop | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
@document
Experimental
非标
|
Chrome 不支持 No | Edge 不支持 No |
Firefox
完整支持
61
Prefixed
注意事项
Disabled
|
IE 不支持 No | Opera 不支持 No | Safari 不支持 No | WebView Android 不支持 No | Chrome Android 不支持 No |
Firefox Android
完整支持
61
Prefixed
注意事项
Disabled
|
Opera Android 不支持 No | Safari iOS 不支持 No | Samsung Internet Android 不支持 No |
regexp()
Experimental
非标
|
Chrome 不支持 No | Edge 不支持 No | Firefox 完整支持 6 | IE 不支持 No | Opera 不支持 No | Safari 不支持 No | WebView Android 不支持 No | Chrome Android 不支持 No | Firefox Android 完整支持 6 | Opera Android 不支持 No | Safari iOS 不支持 No | Samsung Internet Android 不支持 No |
完整支持
不支持
实验。期望将来行为有所改变。
非标。预期跨浏览器支持较差。
见实现注意事项。
用户必须明确启用此特征。
要求使用供应商前缀或不同名称。