text-decoration y el CSS3

Es bastante común que uno lea algo interesante, algún truco o script que nos llama la atención y luego, cuando abrimos el demo, aparece un cartelito que nos dice que eso no funciona en nuestro navegador o, peor aún, no nos dice nada y nos quedamos preguntándonos ¡qué demonios pasa!

Lamentablemente, la moda-fiebre Chrome hace que eso sea un problema permanente y en lo personal, me parece muy molesto ya que, bastaría advertirlo previamente o dar alternativas porque, salvo que el Dios Google disponga lo contrario y exija lo contrario, siempre habrá muchísimos usuarios que usarán otros navegadores, sin importar cuál y sin importar por qué.

En fin, al margen y para compensar un poco tanta chromemanía, estas son propiedades de CSS3 definidas por la w3org que no funcionarán en Chrome y que si lo harán en Firefox y en las versiones beta de Internet Explorer.

text-decoration es una propiedad muy vieja, jamás ha cambiado y es poco flexible; en principio, tiene unos pocos valores elementales: none, underline, overline, line-through y blink de las cuales, solemos usar sólo las dos primeras y lo que hacen es subrayar un texto o evitar que quede subrayado que es lo que por defecto ocurre con todos los enlaces.

este es un texto subrayado

Por ahora, las nuevas propiedades propuestas con la w3org son tres y en Firefox debemos usarlas, agregando el prefijo -moz:

text-decoration-color: color;
text-decoration-line: tipo;
text-decoration-style: tipo;

text-decoration-color es sencilla de entender, es el color de ese subrayado que, por defecto es siempre el mismo que el del texto.

text-decoration-line indica la posición del subrayado y posee las mismas opciones de siempre: none (ninguno) underline (debajo) overline (arriba) line-through (tachado)

Así que si quisieramos que ese texto se subraye con otro color distinto al del texto, podríamos poner algo así:

.ejemplo {
  /* colores, fuentes, etc */
  text-decoration: underline; /* se subraya en los navegadores que no aceptan la propiedad */
  -moz-text-decoration-color: red;
  -moz-text-decoration-line: underline;
}

este es un ejemplo subrayado en rojo en Firefox

text-decoration-style es la propiedad más interesante ya que agrega una serie de estilos distintos al tipo de línea que son los mismos valores que se utilizan en la propiedad border-style: solid, double, dotted, dashed:

estilo solid

estilo double

estilo dotted

estilo dashed

Y un valor extra llamado wavy que muestra una línea ondulada:

.ejemplo {
  /* colores, fuentes, etc */
  text-decoration: underline; /* se subraya en los navegadores que no aceptan la propiedad */
  -moz-text-decoration-color: red;
  -moz-text-decoration-line: underline;
  -moz-text-decoration-style: wavy;
}

este es un ejemplo subrayado con wavy