This is an experimental technology
Because this technology's specification has not stabilized, check the compatibility table for usage in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future versions of browsers as the specification changes.

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).
  • 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(), and domain() 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 \\.).

Formal syntax

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

Example

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;
  }
}

Specifications

Initially in CSS Conditional Rules Module Level 3, @document has been postponed to Level 4.

Browser compatibility

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

Quantum CSS notes

  • Gecko reuses the same mechanism used when parsing a url-token when parsing the domain() or url-prefix() URL matching functions for a @-moz-document rule. Firefox's new parallel CSS engine (also known as Quantum CSS or Stylo, planned for release in Firefox 57) does not use the same mechanism and it does not consider tokens invalid when they contain brackets or quotes (bug 1362333).

See also

Document Tags and Contributors

 Last updated by: chrisdavidmills,