DeprecatedThis 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 compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.
The @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;
}
}
Syntax
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()
, and 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, and attribute selectors.
Note: 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).
Formal syntax
@document [ <url> | url-prefix(<string>) | domain(<string>) | media-document(<string>) | regexp(<string>) ]# { <group-rule-body> }
Examples
Specifying document for CSS rule
@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;
}
}
Specifications
Initially in CSS Conditional Rules Module Level 3, @document
has been postponed to Level 4 then removed.
Browser compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Update compatibility data on GitHub
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
|
Chrome
No support No |
Edge
No support No |
Firefox Full support 61 Full support 61 Prefixed' Implemented with the vendor prefix: -moz-
Notes' Disabled by default in web pages, except for an empty Prefixed' Implemented with the vendor prefix: -moz- |
IE
No support No |
Opera
No support No |
Safari
No support No |
WebView Android
No support No |
Chrome Android
No support No |
Firefox Android Full support 61 Full support 61 Prefixed' Implemented with the vendor prefix: -moz-
Notes' Disabled by default in web pages, except for an empty Prefixed' Implemented with the vendor prefix: -moz- |
Opera Android
No support No |
Safari iOS
No support No |
Samsung Internet Android
No support No |
|
Chrome
No support No |
Edge
No support No |
Firefox
Full support 6 |
IE
No support No |
Opera
No support No |
Safari
No support No |
WebView Android
No support No |
Chrome Android
No support No |
Firefox Android
Full support 6 |
Opera Android
No support No |
Safari iOS
No support No |
Samsung 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.
See also
- Per-site user style sheet rules on the www-style mailing list.
@document by Mozilla Contributors is licensed under CC-BY-SA 2.5.