@document

par 2 contributeurs :

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.

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 exacte
  • url-prefix(), qui fait correspondre le début de l'URL du document
  • domain(), 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(http://www.w3.org/),
               url-prefix(http://www.w3.org/Style/),
               domain(mozilla.org),
               regexp("https:.*")
{
  /* Ces règles CSS s'appliquent à :
     + la page "http://www.w3.org/".
     + les pages dont l'URL commence par "http://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 CSS Conditional Rules Module Level 3@document a été retardé au level 4.

Compatibilité des navigateurs

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Support de base 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
Fonction Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Support de base ? ? ? ? ? ?
regexp() Pas de support Pas de support ? Pas de support Pas de support Pas de support

Voir également

Étiquettes et contributeurs liés au document

Contributeurs à cette page : FredB, teoli
Dernière mise à jour par : FredB,