¿Por qué especificar @charset "UTF-8"; en tu archivo CSS?

173

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", ¿eso eliminaría la necesidad de que también esté presente en mis archivos CSS?

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

css character-encoding

— rsturim
fuente

123

Le dice al navegador que lea el archivo css como UTF-8. Esto es útil si su 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 del juego de caracteres de los archivos CSS en la especificación w3c para CSS 2.

— Oded
fuente

77

También es importante si vincula esos archivos desde sitios que no son UTF-8, como, por ejemplo: un sitio web japonés codificado como UTF-16 que intenta cargar CSS desde un CDN obtendrá contenido ilegible si el archivo CSS no declara su codificación

— Paracetamol

147

Esto es útil en contextos donde la codificación no se cuenta 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 @charsetregla, la mayoría de los navegadores lo leerán en la codificación regional del sistema operativo, por ejemplo, Windows-1252, e insertarán â † 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 @charsetregla.

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

Encabezado HTTP Charset.
Marca de orden de bytes.
La primera @charsetregla
UTF-8.

La última regla es la más débil, que se fallará en algunos navegadores.
El charsetatributo en <link rel='stylesheet' charset='utf-8'>es obsoleto en HTML 5 .
Cuidado con los conflictos 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; utilizar el nombre preferido para @charsetsi más de un nombre se ha registrado para la misma codificación.
MDN: @charset. Hay una mesa de apoyo. No confio en esto :)
Caso de prueba del CSS WG.

— fuxia
fuente

¿Quiere decir que los archivos css deben servirse con content-type:text/css;charset=utf-8encabezado?

— Pacerier

1

@Pacerier Sí, si esa es la codificación del archivo HTML (debería serlo).

— fuxia

Quiero decir, ¿no está implícito que sin un juego de caracteres, el juego de caracteres del archivo css debe interpretarse de la misma manera que el del archivo HTML incrustado?

— Pacerier

1

@Pacerier Observé que este no siempre es el caso.

— MatTheCat

3

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

— Tony
fuente

2

Si está poniendo una etiqueta <meta> en sus archivos CSS, está haciendo algo mal. La etiqueta <meta> 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. Es posible que tenga codificaciones completamente diferentes para su html y css, aunque no puedo imaginar que sea una buena idea.

— WJS
fuente