This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

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 \\.).

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 (bug 1035091).

Formal syntax

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

Example

CSS

@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.

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidiOS SafariSamsung Internet
Basic support
ExperimentalNon-standard
Chrome No support NoEdge ? Firefox Full support 61
Prefixed Notes Disabled
Full support 61
Prefixed Notes Disabled
Prefixed Requires the vendor prefix: -moz-
Notes Disabled by default in web pages, except for an empty url-prefix() value, which is supported due to its use in Firefox browser detection. Still supported in user stylesheets.
Disabled From version 61: this feature is behind the layout.css.moz-document.content.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
No support 1.5 — 61
Prefixed
Prefixed Requires the vendor prefix: -moz-
IE No support NoOpera No support NoSafari No support NoWebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android No support No
regexp()
ExperimentalNon-standard
Chrome No support NoEdge ? Firefox Full support 6
Prefixed
Full support 6
Prefixed
Prefixed Requires the vendor prefix: -moz-
IE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoEdge Mobile ? Firefox Android ? Opera Android No support NoSafari iOS No support NoSamsung Internet Android No support No

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown
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

Document Tags and Contributors

Last updated by: chrisdavidmills,