Por qué especificar @charset “UTF-8”; en tu archivo CSS?

He estado viendo esta instrucción como la primera línea de numerosos archivos CSS que me han sido entregados:

@charset "UTF-8"; 

¿Qué hace, y es necesaria esta regla?

Además, si incluyo esta metaetiqueta en mi elemento “head”, ¿eliminaría eso la necesidad de que también esté presente en mis archivos CSS?

  

Le dice al navegador que lea el archivo css como UTF-8. Esto es útil si CSS contiene caracteres Unicode y no solo ASCII.

Usarlo en la metaetiqueta está bien, pero solo para páginas que incluyen esa metaetiqueta.

Lea sobre las reglas para la resolución de conjuntos de caracteres de archivos CSS en la especificación w3c para CSS 2.

Esto es útil en contextos donde la encoding no se especifica por encabezado HTTP u otros metadatos, por ejemplo, el sistema de archivos local.

Imagine la siguiente hoja de estilo:

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

Si un lector guarda el archivo en un disco duro y omite la regla @charset , la mayoría de los navegadores lo leerán en la encoding del entorno local del sistema operativo, p. Ej. Windows-1252, e insertará â † – en lugar de una flecha.

Desafortunadamente, no puede confiar en este mecanismo ya que el soporte es bastante raro. Y recuerde que en la red un encabezado HTTP siempre anulará la regla @charset .

Las reglas correctas para determinar el conjunto de caracteres de una hoja de estilo están en orden de prioridad:

  1. Encabezado HTTP Charset.
  2. Marca de orden de bytes
  3. La primera regla @charset .
  4. UTF-8.

La última regla es la más débil, fallará en algunos navegadores.
El atributo de charset en está obsoleto en HTML 5 .
Cuidado con el conflicto entre las diferentes declaraciones. No son fáciles de depurar.

Lectura recomendada

  • Russ Rolfe: declarando codificaciones de caracteres en CSS
  • IANA: nombres oficiales para conjuntos de caracteres ; no se permiten otros nombres; use el nombre preferido para @charset si hay más de un nombre registrado para la misma encoding.
  • MDN: @charset . Hay una mesa de apoyo. No confío en esto 🙂
  • Caso de prueba del CSS WG.

Una razón para incluir siempre una especificación de conjunto de caracteres en cada página que contiene texto es evitar las vulnerabilidades de scripts entre sitios. En la mayoría de los casos, el juego de caracteres UTF-8 es la mejor opción para texto, incluidas las páginas HTML.

Si está poniendo una etiqueta en sus archivos css, está haciendo algo mal. La etiqueta pertenece a sus archivos html y le dice al navegador cómo está codificado el html, no dice nada sobre el css, que es un archivo separado. Posiblemente podrías tener codificaciones completamente diferentes para tu html y css, aunque no puedo imaginar que sea una buena idea.