MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-survey

Esta traducción está incompleta. Por favor, ayuda a traducir este artículo del inglés.

Esta es una tecnología experimental
Comprueba la Tabla de compabilidad de navegadores cuidadosamente antes de usarla en producción.

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

Una regla @document puede especificar una o más funciones coincidentes. Si alguna de las funciones se aplica a una URL determinada, la regla tendrá efecto en esa URL. Las funciones disponibles son:

  • 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 \\.).

Note: There is a -moz-prefixed version of this property — @-moz-document. This has been limited to use only in user and UA sheets in Firefox 59 in Nightly and Beta — an experiment designed to mitigate potential CSS injection attacks (error 1035091).

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

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Soporte básico No ?1.5 -moz- No No No
regexp() No ?6 -moz- No No No
FeatureAndroid webviewChrome para AndroidEdge mobileFirefox para AndroidOpera AndroidiOS SafariSamsung Internet
Soporte básico ? ? ? ? ? ? ?
regexp() No No ? ? No No ?

See also

Etiquetas y colaboradores del documento

 Colaboradores en esta página: SphinxKnight, lsosa81
 Última actualización por: SphinxKnight,