Cette fonction est expérimentale
Puisque cette fonction est toujours en développement dans certains navigateurs, veuillez consulter le tableau de compatibilité pour les préfixes à utiliser selon les navigateurs.
Il convient de noter qu'une fonctionnalité expérimentale peut voir sa syntaxe ou son comportement modifié dans le futur en fonction des évolutions de la spécification.

La règle CSS arobase @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.

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

Syntaxe

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 1035091).

Syntaxe formelle

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

Exemples

@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 CSS Conditional Rules Module Level 3, @document a été repoussée au niveau 4.

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari pour iOSSamsung Internet
Support simple
ExpérimentaleNon-standard
Chrome Aucun support NonEdge ? Firefox Support complet 61
Préfixée Notes Désactivée
Support complet 61
Préfixée Notes Désactivée
Préfixée Nécessite l'utilisation d'un préfixe : -moz-
Notes Disabled by default in web pages, except for an empty url-prefix() value, which is supported due to its use in Firefox browser detection. Still supported in user stylesheets.
Désactivée From version 61: this feature is behind the layout.css.moz-document.content.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Aucun support 1.5 — 61
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -moz-
IE Aucun support NonOpera Aucun support NonSafari Aucun support NonWebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android Aucun support Non
regexp()
ExpérimentaleNon-standard
Chrome Aucun support NonEdge ? Firefox Support complet 6
Préfixée
Support complet 6
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -moz-
IE Aucun support NonOpera Aucun support NonSafari Aucun support NonWebView Android Aucun support NonChrome Android Aucun support NonEdge Mobile ? Firefox Android ? Opera Android Aucun support NonSafari iOS Aucun support NonSamsung Internet Android Aucun support Non

Légende

Support complet  
Support complet
Aucun support  
Aucun support
Compatibilité inconnue  
Compatibilité inconnue
Fonctionnalité expérimentale. Celle-ci peut être amenée à changer par la suite.
Fonctionnalité expérimentale. Celle-ci peut être amenée à changer par la suite.
Fonctionnalité non-standard. Celle-ci peut être incorrectement supportée par les autres navigateurs.
Fonctionnalité non-standard. Celle-ci peut être incorrectement supportée par les autres navigateurs.
Voir les notes d'implémentation.
Voir les notes d'implémentation.
Une action explicite de l'utilisateur est nécessaire pour activer cette fonctionnalité.
Une action explicite de l'utilisateur est nécessaire pour activer cette fonctionnalité.
Cette fonctionnalité nécessite un préfixe particulier ou utilise un autre nom.
Cette fonctionnalité nécessite un préfixe particulier ou utilise un autre nom.

Voir aussi

Étiquettes et contributeurs liés au document

Étiquettes : 
Contributeurs à cette page : SphinxKnight, NemoNobobyPersonne, fscholz, FredB, teoli
Dernière mise à jour par : SphinxKnight,