soy Kseso y esto EsCSS

CSS charset y otras cosas tan extrañas que te puedes encontrar

CSS charset y otras cosas tan extrañas que te puedes encontrar

·Por Kseso ✎ 3
CSS charset y otras cosas tan extrañas que te puedes encontrar

Actualizado Abril 2015

¿Te ha llamado la atención alguna vez, o has reparado, que hay quien sí y hay quien no comienza sus estilos con la declaración de algún tipo de charset?
Si utilizas firebug o equivalentes, quizás también te hayas fijado que si eliminas esa línea no pasa nada... en un 99% de los casos.

Entonces la pregunta es obligada:
¿Hay o no hay que indicar la codificación en los estilos?

Como estreno del blog, y para que veas que voy de original xD, vamos a hablar de eso y de otras cosillas que te puedes encontrar si curioseas en hojas de estilos ajenas.

Todo lo siguiente, indicado como citas, es lo que dice el consorcio del W3c sobre el uso de charset en la declaración de los estilos en su documento: Declaring character encodings in CSS

Advertencia previa:

Es conveniente declarar siempre la codificación de las hojas de estilo CSS externas si hay texto no ASCII en el archivo CSS. Por ejemplo, puede tener caracteres no ASCII en nombres de fuentes, en valores de la propiedad "content"*, en valores de selectores, etc.

*: pero para ello es mejor esta otra técnica

¿Hay que declarar qué tipo de codificación se utiliza?

En el caso de las declaraciones de estilo integradas en el documento, las reglas @charset no son necesarias y no deben usarse. Estas reglas se han concebido para su uso en hojas de estilo vinculadas únicamente.

Está claro, pero por si queda alguna duda. Si declaras tus estilos en el head de la página no deberías. No lo hagas. Nunca. Es algo totalmente innecesario. Recuerda que al inicio del documento ya has declarado el charset correspondiente, y ese es que que se aplicará también a tus estilos. Excepto que utilices caracteres no ASCII.

Hay un segundo caso donde sí está justificado el uso de @charset:

Using @charset

you should only use this when the style sheet and the calling HTML file are in different encodings.

Sólo deberías usar @charset si la codificación del documento Html y de la hoja de estilos no es la misma.

Cómo se usa @charset y su sintaxis

@charset "UTF-8";

donde "UTF-8" es la codificación. El nombre debe ser un nombre de codificación de caracteres según se describe en el registro de la IANA.
Puede aparecer una sola regla @charset en una hoja de estilo externa y debe hacerlo al principio del documento. No debe haber ningún carácter antes de la regla, ni siquiera comentarios. (No obstante, puede usarse una marca de orden de byte para un documento que tiene una de las codificaciones Unicode.)

También puedes haber visto:

link type="text/css" Content-Type="text/css"; charset="UTF-8"

Eso es porque puedes declarar la codificación del archivo en el encabezado HTTP Content-Type del header. Pero recuerda que si utilizas una declaración HTTP, también debes incluir una declaración dentro de la hoja de estilo.
En caso de conflicto, la declaración en el encabezado HTTP siempre prevalecerá sobre la declaración incluida dentro del archivo css.

La especificación sobre Html 4.1 permite el uso del atributo charset en el elemento link para indicar la codificación del recurso que enlaza.
Sin embargo la especificación sobre Html 5 marca esta práctica, uso del atributo charset en el elemento link, como obsoleta.

Sinceramente, ya deberías haberte cansado de leer tanto rollo. Pero si no has tenido bastante, vamos con otras particularidades que quizás te hayas encontrado al curiosear en estilos ajenos.

Un comentario de html al inicio y su cierre al final. ¿Para qué?

<style type="text/css"> <!-- /*Todos los estilos*/ --> </style>

Se podría decir que es un arcaísmo. Recuerdos de tiempos pasados. Pero muy pasados. Símplemente se preveía toparse con un navegador/versión que no entendiese la etiqueta style en el head y se volviese loco.
Pero mira de qué tiempos vendrá que ya el ie5 los aceptaba.

y de un arcaísmo a un supermodernismo

<style type="text/css"> /*<![CDATA[*/ /*todos los estilos*/ /*]]<*/ </style>

Ains!. Ya está bien de rollo, que es el primer artículo del blog y os vais a malacostrumbrar. Este no os lo cuento. Lo dejo para que te animes a dejar tu explicación en los comentarios.
Porque como dicen en menéame, deja un comentario "porque alguien en Internet está equivocado".

avatar del Editor del blog

Ramajero Argonauta, Enredique Amanuense de CSS.
#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Don Kseso Kseso