La règle @ @document
permet d'appliquer des règles à un document en fonction de son URL. Elle est principalement conçue pour être utilisée dans les feuilles de style utilisateur. Une règle @document
peut définir une ou plusieurs fonctions de correspondance ; si une de ces fonctions s'applique à l'URL du document, les règles correspondantes s'appliqueront.
Les fonctions disponibles pour cette règles sont :
url()
qui permettra d'obtenir une correspondance avec une URL exacteurl-prefix()
qui permettra d'obtenir une correspondance si l'URL du document commence avec la valeur fourniedomain()
qui permettra d'obtenir une correspondance si l'URL du document appartient au domaine indiqué ou à un de ses sous-domainesregexp()
qui permettra d'obtenir une correspondance si l'URL du document correspond à une expression rationnelle. L'expression doit correspondre à l'URL entière.
Syntaxe
Les valeurs fournies aux fonctions url()
, url-prefix()
et domain()
peuvent éventuellement être délimitées par des quotes (simples ou doubles). Les valeurs fournies à la fonction regexp()
doivent être délimitées par des quotes.
Pour l'échappement des valeurs dans la fonction regexp()
, il faut également rajouter un niveau d'échappement pour le CSS. Ainsi, dans les expressions rationnelles, un point « . » correspond à n'importe quel caractère. Pour utiliser une correspondance avec un point dans une URL, il faudra d'abord l'échapper au sens de l'expression rationnelle avec une barre oblique inversée « \. » puis l'échapper pour CSS avec une deuxième barre oblique inversée « \\.
».
Syntaxe formelle
{{csssyntax}}
Exemples
@document url(https://www.w3.org/), url-prefix(https://www.w3.org/Style/), domain(mozilla.org), regexp("https:.*") { /* Les règles CSS qui suivent s'appliquent à : - La page "https://www.w3.org/". - Toute page dont l'URL commence par "https://www.w3.org/Style/" - Toute page dont l'hôte de l'URL est "mozilla.org" ou finit par ".mozilla.org" - Toute page dont l'URL commence par "https:" */ /* Et là, on rend ces pages vraiment moches :) */ body { color: purple; background: yellow; } }
Spécifications
{{WhyNoSpecStart}}Cette règle @ fut initialement proposée pour la spécification {{SpecName('CSS3 Conditional')}} et fut repoussée afin d'être traitée par la spécification de niveau 4.{{WhyNoSpecEnd}}
Compatibilité des navigateurs
{{CompatibilityTable}}
Fonctionnalité | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Support simple | {{CompatNo}} | {{CompatGeckoDesktop("1.8")}}{{property_prefix("-moz")}} | {{CompatNo}} | {{CompatNo}} | {{CompatNo}} |
regexp() |
{{CompatNo}} | {{CompatGeckoDesktop("6.0")}}{{property_prefix("-moz")}} | {{CompatNo}} | {{CompatNo}} | {{CompatNo}} |
Fonctionnalité | Android | Chrome pour Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|
Support simple | {{CompatUnknown}} | {{CompatUnknown}} | {{CompatUnknown}} | {{CompatUnknown}} | {{CompatUnknown}} | {{CompatUnknown}} |
regexp() |
{{CompatNo}} | {{CompatNo}} | {{CompatUnknown}} | {{CompatNo}} | {{CompatNo}} | {{CompatNo}} |
Voir aussi
- Gérer des feuilles de style utilisateur par site, une discussion sur la liste de diffusion www-style.
- Le fichier
userContent.css
qui est la feuille de style destinée aux utilisateurs des navigateurs basés sur Gecko