Cette page a été traduite à partir de l'anglais par la communauté. Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.

View in English Always switch to English

@document

Obsolète: Cette fonctionnalité a été supprimée des standards du Web. Bien que quelques navigateurs puissent encore la supporter, elle est en cours d'éradication. Ne l'utilisez ni dans d'anciens projets, ni dans de nouveaux. Les pages et applications Web l'utilisant peuvent cesser de fonctionner à tout moment.

Non standard: Cette fonctionnalité n'est pas standardisée. Nous déconseillons d'utiliser des fonctionnalités non standard en production, car leur prise en charge par les navigateurs est limitée, et elles peuvent être modifiées ou supprimées. Toutefois, elles peuvent constituer une alternative appropriée dans certains cas où aucune option standard n'existe.

La règle @ CSS @document restreint les règles qu'elle contient en fonction de l'URL du document. Elle est principalement conçue pour les feuilles de style utilisateur, bien qu'elle puisse être également utilisée pour les feuilles de style d'auteur.

Syntaxe

css
@document url("https://www.example.com/")
{
  h1 {
    color: green;
  }
}

Une règle @document peut définir une ou plusieurs fonctions de correspondance. Si l'une quelconque des règles s'applique à l'URL donnée, la règle prendra effet sur cette URL. Les fonctions disponibles sont :

  • url(), qui établit une correspondance avec une URL exacte ;
  • url-prefix(), qui établit une correspondance si l'URL du document commence par la valeur fournie ;
  • domain(), qui établit une correspondance si l'URL du document se trouve sur le domaine indiqué (ou l'un de ses sous-domaines) ;
  • media-document() qui caractérise le type de document : vidéo, image, plugin, tout ;
  • regexp(), qui établit une correspondance avec si l'URL du document vérifie une expression rationnelle. L'expression doit correspondre à l'URL entière.

Les valeurs fournies aux fonctions url(), url-prefix(), media-document() et domain() peuvent être éventuellement délimitées par des apostrophes, simples ou doubles. Les valeurs fournies à la fonction regexp() doivent être délimitées par des apostrophes.

Les valeurs échappées fournies à la fonction regexp() doivent être en outre échappées pour le CSS. Par exemple, un . (point) correspond à n'importe quel caractère dans les expressions régulières. Pour établir une correspondance avec un point littéral, vous aurez d'abord besoin de l'échapper en utilisant les règles des expressions rationnelles (en \.), puis d'échapper cette chaîne en utilisant les règles CSS (en \\.).

Note : Il existe une version préfixée de cette propriété pour Mozilla : @-moz-document. Cette propriété a été restreinte aux feuilles de style utilisateur ou à celles de l'agent utilisateur à partir de Firefox 59 afin d'expérimenter une méthode de réduction des risques d'injections CSS (cf. bug Firefox 1035091).

Syntaxe formelle

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

Exemples

css
@document url("http://www.w3.org/"),
               url-prefix("http://www.w3.org/Style/"),
               domain("mozilla.org"),
               media-document("video"),
               regexp("https:.*") {
  /* Ces règles CSS s'appliquent à :
     - la page "http://www.w3.org/"
     - toute page dont l'URL commence par "http://www.w3.org/Style/"
     - toute page dont l'hôte de l'URL est "mozilla.org"
       ou finit par ".mozilla.org"
     - toute vidéo
     - toute page dont l'URL commence par "https:" */

  /* Rendre ces pages vraiment laides */
  body {
    color: purple;
    background: yellow;
  }
}

Spécifications

Initialement dans le niveau 3, @document a été reporté au niveau 4, mais a ensuite été supprimé.

Compatibilité des navigateurs

Voir aussi