Cómo indicar el juego de caracteres en una hoja de estilo

Si una hoja de estilo en cascada (CSS) contiene caracteres que no pertenecen al juego de caracteres ASCII, como por ejemplo las vocales acentuadas (áéíóú) o caracteres especiales como el símbolo de copyright © o las flechas izquierda y derecha (← →), se pueden producir problemas con su uso si no se utiliza el juego de caracteres apropiado.
En Declaring character encodings in CSS del W3C se indica que siempre se debe emplear UTF-8 como juego de caracteres para las páginas web HTML y para las hojas de estilo CSS. Si en el página web se indica el juego de caracteres, entonces no es necesario volver a indicarlo en la hoja de estilo. Sin embargo, se pueden dar situaciones en las que se combinen páginas web y hojas de estilo con distintos juegos de caracteres. En estos casos se debe indicar la codificación empleada en la hoja de estilo.
En la especificación CSS3 Syntax se indican los métodos que se pueden emplear para definir la codificación de una hoja de estilo, de mayor a menor importancia:

1. El valor Byte Order Mark (BOM) de Unicode situado al principio del fichero.
2. El valor indicado por la cabecera HTTP Content-Type o por un protocolo similar cuando se transmite el fichero.
3. El valor indicado por la regla @charset en el propio fichero.
4. El juego de caracteres empleado en el documento que enlaza el documento.
5. Si no se indica nada, se asume que es UTF-8.

Sin embargo, no todos los navegadores web cumplen estas reglas correctamente. Además, una hoja de estilo se puede utilizar en local, por lo que no existirá una cabecera HTTP que indique el juego de caracteres. O también se puede mover a otro servidor web que no haga uso de la cabecera HTTP para indicar el juego de caracteres. Por tanto, lo mejor es indicar siempre el juego de caracteres con la regla @charset.

La regla @charset

El uso de la regla @charset debe cumplir lo siguiente:

• La regla @charset debe ser lo primero que se indique en una hoja de estilo, no puede existir ningún carácter previo, ni siquiera comentarios.
• Si se definen varias reglas @charset, sólo la primera será utilizada.
• No se debe emplear cuando la hoja de estilo esté integrada (embebida) en la propia página web con la etiqueta <style>. Sólo se debe emplear cuando la hoja de estilo está vinculada de forma externa.

Por ejemplo, al principio de una hoja de estilo en cascada se puede escribir:

@charset "UTF-8";

O también:

@charset "iso-8859-15";

En el ejemplo anterior se indica el juego de caracteres ISO-8859-15 (Latin-9), que es similar a ISO-8859-1 pero con la diferencia importante de que incluye el símbolo del euro (€).
Los siguientes dos ejemplos no son correctos:

/* Hay un espacio en blanco antes de la regla @charset */
 @charset "UTF-8";
/* El valor del juego de caracteres se debe indicar entrecomillado */
@charset UTF-8;

El atributo charset en el elemento link

En las versiones anteriores de HTML se indicaba que se podía utilizar el atríbuto charset en la etiqueta <link> para indicar el juego de caracteres de la hoja de estilo enlazada. Sin embargo, el uso de este atributo en <link> está declarado como obsoleto en HTML5 y por tanto no se debe utilizar.