Usando imágenes para dar estilo a los elementos II. Usando símbolos

Segunda entrada de la serie de estilado de elementos.

Hay veces que no es necesario usar imágenes para dar estilo a elementos como por ejemplo en listas de elementos a modo de bullets (suponiendo que no fuera aplicable o no quisiéramos usar la imagen de bullet con list-style-image: url(imagen.gif) ). Se podrían usar caracteres especiales para conseguir el mismo efecto ahorrándonos peticiones HTTP para cargar una imagen que al fin y al cabo haría lo mismo además de que al ser caracteres en vez de imágenes sería más accesible.

Para los ejemplos, se van a colocar los símbolos de la baraja francesa (picas, corazones, diamantes y tréboles) delante de un elemento del siguiente ejemplo:

<ul class="glyphs">
    <li class="one">Picas</li>
    <li class="two">Tréboles</li>
    <li class="three red">Corazones rojos</li>
    <li class="four red">Diamantes rojos</li>
</ul>

El CSS para conseguir ésto es:

.glyphs { list-style-type: none; }
  .glyphs li:before,
  .glyphs b { display: inline-block; width: 1.5em; font-size: 1.5em; text-align: center; }
    .one, .one:before {
      content: "\2660"; /* Picas */
      background-image: expression(this.runtimeStyle.backgroundImage="none",this.innerHTML = '<b>&spades;</b>'+this.innerHTML);
    }
    .two, .two:before {
      content: "\2663"; /* Tréboles */
      background-image: expression(this.runtimeStyle.backgroundImage="none",this.innerHTML = '<b>&clubs;</b>'+this.innerHTML);
    }
    .three, .three:before {
      content: "\2665"; /* Corazones */
      background-image: expression(this.runtimeStyle.backgroundImage="none",this.innerHTML = '<b>&hearts;</b>'+this.innerHTML);
    }
    .four, .four:before {
      content: "\2666"; /* Diamantes */
      background-image: expression(this.runtimeStyle.backgroundImage="none",this.innerHTML = '<b>&diams;</b>'+this.innerHTML);
    }
    .red b, .red:before { color: red; }

Ventajas de este modo de representación:

1. Rendimiento. 0 peticiones HTTP = página más rápida.
2. Usabilidad. El glifo de texto se escala de acuerdo con el tamaño de la fuente de la página.
3. Mantenimiento. Al no usarse sprites, no hay que mantener ni imágenes ni posiciones. Fire-and-forget.
4. Accesibilidad. WYSIYG. Lo que ves es lo que hay.

Cómo funciona?

La base es hacer que la propiedad del before de los li de la lista sea "display: inline-block; width: 1.5em;" con lo que indica tanto cómo se va a representar como que tiene ancho fijo pero proporcional al tamaño de la fuente, lo que lo hace escalable. 

El secreto está en el uso de la propiedad CSS2 "content" y la pseudo-clase ":before". Con ella, se puede inyectar un contenido delante (a la izquierda hablando en llano) del contenido del elemento. Pero hay una pega. :before y el resto de las pseudo-clases y pseudo-elementos no funcionan en la misma mierda de siempre, Internet Explorer antes de la 8, pero hay una solución, usar expresiones CSS.

Las expresiones CSS, son mortales para el rendimiento de una página como hemos visto en entregas anteriores, pero son el único modo de funcionamiento para IE6/7 por lo que si queremos que nuestro CSS en este caso se vea igual en todos los navegadores hace que no sea algo opcional. En este caso,  la expresión modifica el fuente de la página de modo que cuando se cumpla la regla CSS, se inyecte un código HTML "<b>glifo</b>" justo delante. Como hemos definido reglas para los <b> de los <li> de la lista, eso hará que podamos aplicarle además otras reglas a los elementos <b>, como es la regla "red" en el ejemplo.

Hay que tener en cuenta que para la propiedad content, hay que inyectar texto en formato unicode, mientras en que en las expresiones al inyectar HTML, se pueden usar códigos HTML normales.

Como referencia, en esta página se puede obtener el código unicode de los 65536 caracteres que se pueden definir.