Codificación de caracteres. La directiva @charset.

Cuando creamos una hoja de estilos, ya sea en un preprocesador como SASS o directamente en CSS, es una buena práctica establecer el juego de caracteres empleado. Esto es por dos razones. La primera es por la codificación de la propia hoja de estilos. Esta puede establecerse desde el editor empleado, por lo que habrá que tener en cuenta que nuestro editor grabe las hojas de estilos (y, cualquier documento, en general) con la codificación adecuada. La segunda es porque, como sabes, es posible incluir textos en un documento desde una hoja de estilos, mediante la etiqueta content de los pseudo elementos after y before. Si el texto no está grabado con el mismo juego de caracteres que, por ejemplo, el documento HTML donde se incluye, podríamos tener problemas de visualización con caracteres acentuados, u otros no normalizados del alfabeto inglés.

Establecer el juego de caracteres es muy simple, con una sola línea, y nos evitará muchos problemas. Para ello empleamos la directiva @charset, seguida del juego de caracteres deseado entre comillas. Esta línea deberá ser la primera de nuestro archivo scss principal. Por ejemplo, para que se emplee el UTF-8 (uno de los más difundidos hoy día en Internet), emplearemos la siguiente línea:

@charset "UTF-8";

Si nuestro documento está pensado para ser visualizado en, digamos, ISO 8859-1, emplearemos la siguiente línea:

@charset "iso-8859-1";

Esta línea se escribe, tal cual, al principio del archivo SASS, como acabamos de comentar. No tiene mayor misterio. Sin embargo, al hacer la transpilación es posible que no aparezca esta línea en tu archivo CSS. Si tu archivo SASS incluye algún carácter que no pertenezca al código ASCII la línea sí aparecerá en la transpilación. Mi consejo es que, si no te aparece (por no tener, en principio, caracteres no ASCII), la incluyas tú manualmente en el CSS. El establecimiento del charset debería estar presente, por buenas prácticas de programación, sí o sí en el CSS final.

ATENCIÓN. Sí hay una cosa que debes recordar. Evidentemente, el juego de caracteres debe ser el mismo en todos los elementos de tu sitio web afectados por este detalle. Si en tus hojas de estilos incluyes

@charset "UTF-8";

en la cabecera de tus archivos HTML deberás incluir

<meta charset = "UTF-8">

Además, si empleas código PHP, deberás incluir, al principio del mismo, lo siguiente:

header('Content-Type: text/html; charset=UTF-8');

El tipo de contenido puede variar, dependiendo de lo que quieras que genere, como respuesta, tu PHP, pero el charset deberá coincidir con el especificado.

Por último, si tienes, en tu servidor, acceso al archivo .htaccess, estaría muy bien incluir, en el mismo, lo siguiente:

AddDefaultCharset utf-8

En estos ejemplos hemos puesto UTF-8 por ser la codificación más extendida en la web, evitando conflictos de caracteres. En todo caso, el nombre del juego de caracteres debe ser uno de los tipificados en el RFC 2978, que aparecen listados en la web de iana.

Ahora que lo sabemos, en sucesivos artículos emplearemos siempre esta directiva.

   

Deja un comentario