Document At Rule

A custom (limited) implementation of the @docment at-rule on the standards track for CSS. This at-rule wraps a list of CSS rules and allows authors to query properties of the URL of the currently loaded page to determine whether or not the rules it holds should apply to the page.

Syntax

@--document <function list> { <list of css rules> }

• is one or more of the following in a comma-separated list: url(), url-prefix(), domain(), regexp()

Usage

url()

This rule would only apply to pages that match the url https://example.com:

@--document url(https://example.com) {
  html {
    background: lime
  }
}

url-prefix()

This rule would only apply to pages whose url starts with https://example:

@--document url-prefix(https://example) {
  html {
    background: lime
  }
}

domain()

This rule would only apply to pages that whose host name matches example:

@--document domain(example) {
  html {
    background: lime
  }
}

regexp()

This rule would only apply to pages whose domain matches the regular expression http:\/\/*\.example\.com, note carefully that special characters like . and \ must be escaped to be used in CSS:

@--document regexp(http:\\/\\/*\\.example\\.com) {
  html {
    background: lime
  }
}

More Info

• Check out the MDN page on the @document rule in CSS.