@document CSS At-Rule

The @document at-rule provides a mechanism to conditionally apply a block of style rules only when the current document as a whole meets one or more specified criteria. Rather than affecting individual selectors directly, it acts as a container that enables authors to group together regular CSS rules and have the entire group become effective only for pages that match the document-level conditions. This makes it useful for creating stylesheet sections that are relevant to particular sites, paths, or other document-identifying properties without having to prepend those conditions to every selector.

Inside the @document block, the rules behave like ordinary CSS: cascade, specificity, inheritance and all the usual mechanisms still determine the ultimately applied declarations. The at-rule simply gates that entire set of declarations based on the document match; when the condition is not satisfied, the contained rules are treated as if they are not present for that document. You can think of it as moving the conditional logic from individual selectors to a grouping level, which can make complex style sheets easier to organize and maintain when multiple rules share the same document-level applicability.

Matching for the at-rule is typically evaluated by considering attributes of the loaded page that identify it as a particular document instance. Because the decision is made at the document scope, it interacts with dynamic changes to the page: navigation, history manipulation, or other changes that alter the document identity can cause the at-rule’s applicability to change, potentially enabling or disabling its contained rules without editing the stylesheet itself. That means styles may appear or disappear as the runtime context changes, so authors should consider how transitions and layout reflows are handled when document conditions change.

When using @document thoughtfully, it can reduce duplication and keep style logic clear by centralizing document-specific rules. However, it is best reserved for cases where grouping by document identity is genuinely the clearest approach; alternative mechanisms—such as adding a top-level class to the document root or using other conditional at-rules—may be simpler for small, localized differences. Also be mindful of performance and privacy concerns: evaluating document-level conditions should be kept as straightforward as possible to avoid unnecessary layout work, and authors should avoid relying on document-identifying matches in contexts where exposing or inferring user navigation patterns would be a privacy issue.

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

• url()Specifies the exact address of the page for which style rules apply. The address is written inside the url () brackets.
• url-prefix()The value at which the address of the document begins.
• domain()The domain or subdomain of the site.
• regexp()The regular expression to which the address matches.

The following information will show you the current browser support for the CSS at-rule @document. Hover over a browser icon to see the version that first introduced support for this CSS at-rule.

This at-rule is supported in some modern browsers, but not all.

Desktop

Tablets & Mobile