{{ CSSRef() }}
{{SeeCompatTable()}}
Résumé
La règle @document
est une règle @
qui restreint la portée des règles de styles qu'elle contient, selon l'URL du document. Elle est avant tout destinée aux feuilles de styles utilisateur. Une règle @document
peut spécifier une ou plusieurs fonctions d'appariement. Si au moins une des fonctions s'applique à l'URL, la règle prendra effet à cette URL.
Le cas d'utilisation principal concerne les feuilles de styles utilisateurs, toutefois cette règle @ peut être utilisée dans des feuilles auteur.
Les fonctions possibles sont :
url()
, qui fait correspondre une URL exacteurl-prefix()
, qui fait correspondre le début de l'URL du documentdomain()
, qui fait correspondre le domaine (ou sous-domaine)regexp()
, qui fait correspondre grâce à l'expression régulière exprimée.
Syntaxe
Les valeurs envoyées aux fonctions url()
, url-prefix()
, et domain()
peuvent être comprises entre des guillemets simples ou doubles, et ce de manière optionnelle. Les valeurs envoyées à la fonction regexp()
doivent être incluses entre des guillemets.
Les valeurs échappées envoyées à la fonction regexp()
doivent être à nouveau échappées dans le CSS. Par exemple, un . (point) sélectionne n'importe quel caractère dans les expressions régulières. Pour sélectionner un point, il faut d'abord l'échapper en utilisant les règles des expressions régulières (faire \.
), puis échapper cette chaîne en utilisant les règles CSS (faire \\.
).
Exemples
@document url(https://www.w3.org/), url-prefix(https://www.w3.org/Style/), domain(mozilla.org), regexp("https:.*") { /* Ces règles CSS s'appliquent à : + la page "https://www.w3.org/". + les pages dont l'URL commence par "https://www.w3.org/Style/" + les pages dont l'URL de l'hôte est « mozilla.org » ou finit par « .mozilla.org » */ /* Rendre les pages mentionnées ci-dessus vraiment immondes */ body { color: purple; background: yellow; } }
Spécifications
Initialement dans {{ SpecName('CSS3 Conditional', '', '') }}, @document
a été retardé au level 4.
Compatibilité des navigateurs
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Support de base | {{ CompatNo() }} | {{ CompatGeckoDesktop("1.8") }} {{ property_prefix("-moz") }} | {{ CompatNo() }} | {{ CompatNo() }} | {{ CompatNo() }} |
regexp() |
{{ CompatNo() }} | {{ CompatGeckoDesktop("6.0") }} {{ property_prefix("-moz") }} | {{ CompatNo() }} | {{ CompatNo() }} | {{ CompatNo() }} |
Fonction | Android | Chrome for Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|
Support de base | {{ CompatUnknown() }} | {{ CompatUnknown() }} | {{ CompatUnknown() }} | {{ CompatUnknown() }} | {{ CompatUnknown() }} | {{ CompatUnknown() }} |
regexp() |
{{ CompatNo() }} | {{ CompatNo() }} | {{ CompatUnknown() }} | {{ CompatNo() }} | {{ CompatNo() }} | {{ CompatNo() }} |
Voir également
- Feuilles de style utilisateur spécifiques à un sit (en) sur la liste de diffusion www-style.
- Le fichier userContent.css est une feuille de style utilisateur pour les navigateurs utilisant Gecko