La règle @  @charset définit l'encodage des caractères utilisés dans la feuille de style. Cette règle doit être le premier élément de la feuille de style (aucun caractère ne doit être écrit avant). Cette règle ne fait pas partie des instructions imbriquées et ne peut donc pas être utilisée à l'intérieur des groupes conditionnels. Si plusieurs règles @charset sont définies, seule la première sera utilisée. Cette règle ne pourra pas être utilisée au sein d'un attribut style d'un élément HTML ou avec l'élément <style> car c'est l'encodage du document HTML qui est alors pris en compte.

@charset "utf-8";

Cette règle @ s'avère notamment utile lorsqu'on utilise des caractères non-ASCII pour certaines propriétés CSS telles que content.

Le moteur dispose de différentes méthodes pour déterminer l'encodage d'une feuille de style. Il utilisera ces méthodes dans l'ordre qui suit et s'arrêtera dès qu'un résultat sera obtenu (autrement dit, les règles qui suivent sont triées par priorité décroissante) :

  1. La valeur du caractère indiquant l'ordre des octets Unicode qui est placé au début du fichier (le BOM)
  2. La valeur fournie par l'attribut charset de l'en-tête HTTP Content-Type ou l'information équivalente dans le protocole utilisé pour servir la feuille de style.
  3. La règle @ CSS @charset.
  4. L'encodage défini dans le document appelant la ressource (l'attribut charset de l'élément <link>). Cette méthode est désormais obsolète et ne doit plus être utilisée.
  5. Dans tous les autres cas, on considère que le document est encodé en UTF-8

Syntaxe

@charset <charset>;

charset
Est une chaîne de caractères (une valeur CSS de type  <string>) indiquant l'encodage qui doit être utilisé. Cette valeur doit correspondre à un nom d'encodage valide pour le Web tel que défini dans le registre IANA et doit être délimitée par des doubles quotes, précédée d'un blanc (U+0020) et suivie d'un point-virgule. Si plusieurs noms sont associés avec l'encodage, seul celui marqué avec préféré  (preferred) doit être utilisé.

Syntaxe formelle

@charset "<charset>";

Exemples

Exemples valides

@charset "UTF-8";      /* Valide, la feuille de style est encodée en Unicode UTF-8 */
@charset "iso-8859-15"; /* Valide, la feuille de style est encodée en Latin-9 (langues d'Europe occidentale avec le symbole €) */

Exemples invalides

 @charset "UTF-8";      /* Invalide, il y a un caractère (un espace) avant la règle @ */
@charset UTF-8;         /* Invalide, sans ' ou ", le jeu de caractères n'est pas une chaîne CSS (<string>) */

Spécifications

Spécification État Commentaires
CSS Level 2 (Revision 1)
La définition de '@charset' dans cette spécification.
Recommendation Définition initiale.

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung Internet
Support simpleChrome Support complet 2Edge Aucun support NonFirefox Support complet 1.5
Notes
Support complet 1.5
Notes
Notes Firefox 1 supported an invalid syntax where the character encoding is not between single or double quotes.
IE Support complet 5.5
Notes
Support complet 5.5
Notes
Notes From Internet Explorer 5.5 to IE 7 (inclusive), Internet Explorer supported an invalid syntax where the character encoding is not between single or double quotes.
Opera Support complet 9Safari Support complet 4WebView Android Support complet 2Chrome Android ? Edge Mobile Aucun support NonFirefox Android Support complet 4Opera Android Support complet 10Safari iOS Support complet 4Samsung Internet Android ?

Légende

Support complet  
Support complet
Aucun support  
Aucun support
Compatibilité inconnue  
Compatibilité inconnue
Voir les notes d'implémentation.
Voir les notes d'implémentation.

Étiquettes et contributeurs liés au document

Étiquettes : 
Dernière mise à jour par : SphinxKnight,