web-dev-qa-db-fra.com

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

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 méta dans mon élément "head", cela éliminerait-il la nécessité de la faire figurer également dans mes fichiers CSS?

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
167
rsturim

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 acceptable, mais uniquement pour les pages contenant cette balise META.

Lisez à propos des règles de résolution des jeux de caractères des fichiers CSS à l 'étape spécification w3c pour CSS 2.

119
Oded

Ceci est utile dans les contextes où l'encodage n'est pas indiqué par en-tête HTTP ou par 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 le fichier @charset, la plupart des navigateurs le liront dans le codage de paramètres régionaux du système d’exploitation, par exemple. Windows-1252 et insérez † - au lieu d'une flèche.

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

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

  1. En-tête HTTP Charset.
  2. Byte Order Mark.
  3. La première @charset règle.
  4. UTF-8.

La dernière règle est la plus faible, elle échoue sera dans certains navigateurs.
L'attribut charset 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

145
fuxia

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

2
tony

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 code html est codé. Il ne dit rien du css, qui est un fichier séparé. Vous pourriez éventuellement avoir des encodages complètement différents pour votre html et vos css, bien que je ne puisse pas imaginer que ce serait une bonne idée.

2
WJS