Propiedad CSS @charset

La regla at @charset declara la codificación de caracteres utilizada en una hoja de estilos externa. La codificación de caracteres asigna los bytes brutos de un archivo a caracteres legibles, por lo que el navegador necesita saber qué codificación usa una hoja de estilos antes de poder interpretar correctamente el texto no ASCII — letras acentuadas, símbolos de moneda, emoji o contenido dentro de declaraciones content: "…".

Esta página explica cuándo aplica @charset, las estrictas reglas de sintaxis que facilitan los errores, cómo decide el navegador qué codificación prevalece y los errores comunes que se deben evitar.

¿Cuándo aplica @charset?

@charset está diseñado exclusivamente para hojas de estilos externas (un archivo .css separado vinculado con <link> o importado con @import). Se ignora cuando:

• Aparece dentro de un bloque HTML <style>.
• Aparece dentro de un atributo style en línea.
• No es lo primero del archivo.

En un documento HTML, la codificación se establece con la etiqueta <meta charset>, no con @charset.

En la práctica, raramente se necesita @charset: si guardas tu hoja de estilos como UTF-8 (la opción predeterminada de casi todos los editores y la codificación recomendada para la web), el navegador lo detectará correctamente. @charset es más relevante para hojas de estilos heredadas almacenadas en codificaciones distintas de UTF-8, o como medida de seguridad explícita.

Sintaxis

@charset "encoding";

La regla acepta una única string que nombra una codificación del registro IANA, como "UTF-8" o "iso-8859-15".

La sintaxis es inusualmente estricta — @charset no es una regla at normal y no respeta la flexibilidad habitual de CSS respecto a espacios en blanco y comentarios:

• Debe ser el primer byte de la hoja de estilos. No puede haber caracteres, comentarios ni siquiera espacios antes.
• La codificación debe ir entre comillas dobles.
• Debe haber exactamente un espacio entre @charset y la comilla de apertura.
• La línea debe terminar con punto y coma.

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

Uso válido e inválido

Debido a las estrictas reglas anteriores, pequeñas diferencias de formato determinan si la regla es válida o ignorada:

@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 */

Cuando @charset es inválido o se ignora, el navegador no lanza un error — simplemente recurre a la siguiente fuente de codificación que encuentre.

Cómo elige el navegador una codificación

@charset es solo una de varias señales y tiene una prioridad fija. El navegador utiliza la primera fuente que encuentra, en este orden:

1. Una marca de orden de bytes (BOM) al inicio del archivo.
2. El parámetro charset del encabezado de respuesta HTTP Content-Type (p. ej. text/css; charset=utf-8).
3. La regla at @charset.
4. El atributo charset en el elemento <link> que cargó la hoja de estilos (obsoleto).
5. La codificación del documento de referencia.
6. UTF-8 como valor de reserva.

Dado que un encabezado Content-Type enviado por el servidor tiene mayor prioridad que @charset, un servidor mal configurado puede anular tu codificación declarada. Esta es una razón por la que establecer la codificación a nivel HTTP (o simplemente usar UTF-8 en todas partes) es el enfoque más fiable.

Valores

@charset acepta una única string entre comillas que nombra la codificación de caracteres, por ejemplo "UTF-8" o "iso-8859-1". No acepta las palabras clave initial o inherit — esas se aplican a propiedades CSS, y @charset es una regla at, no una propiedad.

Reglas at relacionadas

• @import — importa una hoja de estilos dentro de otra. Si se usa, las reglas @import deben aparecer justo después de cualquier @charset.
• @media — aplica estilos condicionalmente según las características del medio.
• @font-face — carga y nombra fuentes web personalizadas.

Práctica