Propriété CSS @charset

La règle at-rule @charset déclare l'encodage de caractères utilisé dans une feuille de style externe. L'encodage de caractères établit la correspondance entre les octets bruts d'un fichier et les caractères lisibles ; le navigateur doit donc connaître l'encodage utilisé avant de pouvoir interpréter correctement les textes non-ASCII — lettres accentuées, symboles monétaires, emoji ou contenu dans les déclarations content: "…".

Cette page explique dans quels cas @charset s'applique réellement, les règles syntaxiques strictes qui le rendent facile à mal utiliser, la manière dont le navigateur choisit l'encodage qui prévaut, et les pièges courants à éviter.

Quand @charset s'applique-t-il ?

@charset est strictement destiné aux feuilles de style externes (un fichier .css séparé lié avec <link> ou importé avec @import). Il est ignoré dans les cas suivants :

• Il apparaît dans un bloc HTML <style>.
• Il apparaît dans un attribut style en ligne.
• Il n'est pas le tout premier élément du fichier.

Dans un document HTML, l'encodage se définit avec la balise <meta charset>, et non avec @charset.

En pratique, vous avez rarement besoin de @charset : si vous enregistrez votre feuille de style en UTF-8 (la valeur par défaut de presque tous les éditeurs et l'encodage recommandé pour le web), le navigateur le détectera généralement correctement. @charset est surtout utile pour les feuilles de style héritées stockées dans des encodages non-UTF-8, ou comme mesure de sécurité explicite.

Syntaxe

@charset "encoding";

La règle prend une seule string qui désigne un encodage du registre IANA, comme "UTF-8" ou "iso-8859-15".

La syntaxe est inhabituellement stricte — @charset n'est pas une règle at-rule normale et ne respecte pas la flexibilité habituelle de CSS concernant les espaces et les commentaires :

• Elle doit être le premier octet de la feuille de style. Aucun caractère, commentaire ou même espace ne peut la précéder.
• L'encodage doit être entouré de guillemets doubles.
• Il doit y avoir exactement un espace entre @charset et le guillemet ouvrant.
• La ligne doit se terminer par un point-virgule.

@charset "UTF-8"; /* Set the stylesheet encoding to Unicode UTF-8 */

Utilisation valide ou invalide

En raison des règles strictes ci-dessus, de petites différences de mise en forme font basculer la règle entre valide et ignorée :

@charset "UTF-8";        /* Valid: standard form */
@charset "ISO-8859-15";  /* Valid: any registered encoding name */
 @charset "UTF-8";       /* Invalid: a space precedes the at-rule */
@charset 'UTF-8';        /* Invalid: single quotes are not allowed */
@charset  "UTF-8";       /* Invalid: more than one space after @charset */
@charset "UTF-8"         /* Invalid: missing the closing semicolon */
@charset UTF-8;          /* Invalid: the value must be quoted */

Lorsque @charset est invalide ou ignoré, le navigateur ne génère pas d'erreur — il se replie simplement sur la prochaine source d'encodage disponible.

Comment le navigateur choisit un encodage

@charset n'est qu'un des nombreux signaux disponibles, et sa priorité est fixe. Le navigateur utilise la première source trouvée, dans cet ordre :

1. Un BOM (byte order mark) au début du fichier.
2. Le paramètre charset de l'en-tête de réponse HTTP Content-Type (par ex. text/css; charset=utf-8).
3. La règle at-rule @charset.
4. L'attribut charset sur l'élément <link> qui a chargé la feuille de style (déprécié).
5. L'encodage du document référent.
6. Un repli sur UTF-8.

Étant donné qu'un en-tête Content-Type envoyé par le serveur prend la priorité sur @charset, un serveur mal configuré peut écraser l'encodage que vous avez déclaré. C'est l'une des raisons pour lesquelles définir l'encodage au niveau HTTP (ou simplement utiliser UTF-8 partout) est l'approche la plus fiable.

Valeurs

@charset accepte une seule string entre guillemets désignant l'encodage de caractères, par exemple "UTF-8" ou "iso-8859-1". Il n'accepte pas les mots-clés initial ou inherit — ceux-ci s'appliquent aux propriétés CSS, et @charset est une règle at-rule, pas une propriété.

Règles at-rule associées

• @import — importe une feuille de style dans une autre. Si utilisé, les règles @import doivent venir juste après @charset.
• @media — applique des styles conditionnellement en fonction des caractéristiques du média.
• @font-face — charge et nomme des polices web personnalisées.

Pratique