{@document} (at-document) At-Rule | CSS: Presentation Layer
Standards Based Development
The document at&$45;rule provides one way of utilizing conditional css, for conditional processing, addressing author and user requirements.
@document (along with @supports) are essentially conditional css. @document allows css to be conditioned on the document to which the style sheet is being applied, allowing users to apply styles to a particular page or a group of pages, greatly increasing the power of style sheets.
The @document rule is a conditional group rule whose condition depends on the url of the document being styled. This particularly applies to user style sheets only applying to certain documents as opposed to all documents using the same style sheet (wpo!!!).
The url of the document being styled is the uri, excluding any fragment identifiers. Styles being applied inside a complete document embedded into the presentation of another (via iframe, object, or img), the relevant uri is that of the frame, not of its container. Styles that come from documents mixed in via mechanisms (svg's use element), then the address of the container document is used.
Note: In html5, this is the document's address of a document in browsing context.
@document's rule's condition syntax is a comma-separated list of url matching functions that evaluates to true whenever any of the functions evaluate to true. In the example below, the summary element located on the page http://www.w3.org/Style/CSS/ and on the page http://www.w3.org/Style/CSS/Test, but it does not affect the page http://www.w3.org/ or the page http://www.example.com/Style/CSS/:
@document url-prefix("http://www.w3.org/Style/CSS/") {
#summary{background-color:#c0c0c0; color:#000}
}