Join MDN and developers like you at Mozilla's View Source conference, 12-14 September in Berlin, Germany. Learn more at https://viewsourceconf.org

@document

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 @ @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 exacte
  • url-prefix() qui permettra d'obtenir une correspondance si l'URL du document commence avec la valeur fournie
  • domain() qui permettra d'obtenir une correspondance si l'URL du document appartient au domaine indiqué ou à un de ses sous-domaines
  • regexp() 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

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

Exemples

@document url(http://www.w3.org/),
               url-prefix(http://www.w3.org/Style/),
               domain(mozilla.org),
               regexp("https:.*")
{
  /* Les règles CSS qui suivent 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 page dont l'URL commence par "https:" */

  /* Et là, on rend ces pages vraiment moches :) */
  body {
    color: purple;
    background: yellow;
  }
}

Spécifications

Cette règle @ fut initialement proposée pour la spécification CSS Conditional Rules Module Level 3 et fut repoussée afin d'être traitée par la spécification de niveau 4.

Compatibilité des navigateurs

Fonctionnalité Chrome Firefox (Gecko) Internet Explorer Opera Safari
Support simple Pas de support 1.5 (1.8)-moz Pas de support Pas de support Pas de support
regexp() Pas de support 6.0 (6.0)-moz Pas de support Pas de support Pas de support
Fonctionnalité Android Chrome pour Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Support simple ? ? ? ? ? ?
regexp() Pas de support Pas de support ? Pas de support Pas de support Pas de support

Voir aussi

Étiquettes et contributeurs liés au document

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