Pourquoi spécifier @charset “UTF-8”; dans votre fichier CSS?

173

J'ai vu cette instruction comme la toute première ligne de nombreux fichiers CSS qui m'ont été remis:

@charset "UTF-8";

Que fait-il, et cette règle est-elle nécessaire?

De plus, si j'inclus cette balise meta dans mon élément "head", est-ce que cela éliminerait le besoin de l'avoir également présente dans mes fichiers CSS?

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
css character-encoding rsturim
la source

Réponses:

123

Il indique au navigateur de lire le fichier css au format UTF-8. Ceci est pratique si votre CSS contient des caractères Unicode et pas seulement ASCII.

Son utilisation dans la balise meta est très bien, mais uniquement pour les pages qui incluent cette balise meta.

Découvrez les règles de résolution des jeux de caractères des fichiers CSS dans la spécification w3c pour CSS 2.

Oded
la source
7
Il est également important si vous liez ces fichiers à partir de sites non UTF-8, comme, par exemple: un site Web japonais encodé en UTF-16 essayant de charger CSS à partir d'un CDN obtiendra un contenu illisible si le fichier CSS ne déclare pas son codage.
Paracetamol
147

Ceci est utile dans les contextes où le codage n'est pas indiqué par en-tête HTTP ou d'autres métadonnées, par exemple le système de fichiers local.

Imaginez la feuille de style suivante:

[rel="external"]::after
{
    content: ' ↗';
}

Si un lecteur enregistre le fichier sur un disque dur et que vous omettez la @charsetrègle, la plupart des navigateurs le liront dans le codage des paramètres régionaux du système d'exploitation, par exemple Windows-1252, et insérera â † - au lieu d'une flèche.

Malheureusement, vous ne pouvez pas vous fier à ce mécanisme car le support est plutôt… rare. Et rappelez-vous que sur le net, un en-tête HTTP remplacera toujours la @charsetrègle.

Les règles correctes pour déterminer le jeu de caractères d'une feuille de style sont par ordre de priorité:

  1. En-tête HTTP Charset.
  2. Marque d'ordre d'octet.
  3. La première @charsetrègle.
  4. UTF-8.

La dernière règle est la plus faible, il sera échouer dans certains navigateurs.
L' charsetattribut dans <link rel='stylesheet' charset='utf-8'>est obsolète dans HTML 5 .
Attention aux conflits entre les différentes déclarations. Ils ne sont pas faciles à déboguer.

Lecture recommandée

fuxia
la source
Voulez-vous dire que les fichiers css doivent être servis avec un en- content-type:text/css;charset=utf-8tête?
Pacerier
1
@Pacerier Oui, si c'est l'encodage du fichier HTML (il devrait l'être).
fuxia
Je veux dire, n'est-il pas déjà implicite que sans un jeu de caractères, le jeu de caractères du fichier css devrait être interprété comme le même que celui du fichier HTML d'intégration?
Pacerier
1
@Pacerier J'ai observé que ce n'est pas toujours le cas.
MatTheCat
3

Une des raisons pour toujours inclure une spécification de jeu de caractères sur chaque page contenant du texte est d'éviter les vulnérabilités de scripts intersites. Dans la plupart des cas, le jeu de caractères UTF-8 est le meilleur choix pour le texte, y compris les pages HTML.

Tony
la source
2

Si vous mettez une balise <meta> dans vos fichiers css, vous faites quelque chose de mal. La balise <meta> appartient à vos fichiers html et indique au navigateur comment le html est codé, elle ne dit rien sur le css, qui est un fichier séparé. Vous pourriez avoir des encodages complètement différents pour votre html et votre css, même si je ne peux pas imaginer que ce soit une bonne idée.

WJS
la source