CSS @document At-Rule

The CSS @document at-rule can be used to restrict styles to a single page or a set of pages.

The @document at-rule is a nested at-rule that accepts a list of URLs. Any styles provided are applied only to the specified URLs.

Although the @document at-rule is primarily intended to be used with user style sheets, it can also be used in author style sheets.

Here's an example of using the @document at-rule:

The above example uses the url() function to apply styles to a specific page. Other functions are available that allow you to specify a group of pages, rather than just one. These are listed below.

Possible Values

The URL value/s can be provided by any of the following functions.

url()

Specifies the exact <url> of the document to apply the styles to.

Example:

@document url("http://www.example.com/widgets/") { /* Styles written here are applied only to the document at the above URL */ }

url-prefix()

Allows you to provide one or more URLs by specifying the first part of the URL.

Example:

@document url-prefix("http://www.example.com/widgets/") { /* Styles written here are applied to all URLs that begin with 'http://www.example.com/widgets/' */ }

domain()

Allows you to specify the domain with which the styles are applied.

Example:

@document domain("example.com") { /* Styles written here are applied to all URLs under the 'example.com' domain */ }

regexp()

This function allows you to specify the document/s using a regular expression.

Example:

@document regexp("https:.*") { /* Styles written here are applied to all URLs that begin with 'https:' */ }

Providing a List of Functions

You can provide a list of values using any of the accepted functions. In other words, you're not limited to just one function or another.

Here's an example of using all of the above functions in one declaration:

Official Specifications

The @document at-rule is defined in CSS Conditional Rules Module Level 3 (W3C Working Draft).