Con este artículo les mostraré una manera de cómo CSS realmente potencia la presentación de un sitio, aportando más hacia la accesibilidad y usabilidad que a los muchos argumentos que hemos entregado hasta ahora.
CSS2 nos permite aplicar estilos a elementos basándose en los atributos definidos en las etiquetas HTML, incluso a los valores contenidos en esos atributos. Primero que nada, veamos cómo se declara estos selectores avanzados:
a[href="http://www.csslab.cl/"] {
font-weight: bolder;
}Como se nota, a diferencia de lo que usualmente se hace, se define el atributo entre corchetes ( [href] ). En este ejemplo, lo que se logrará es que un ejemplo con link a este sitio tenga la fuente en negrita.
Una excelente manera de aportar a la usabilidad, es entregándole al usuario la posibilidad de saber cuándo un link es externo, o cuando quieres q se abra en una ventana nueva (target="_blank"). Esto se logra agregando un ícono descriptivo luego del enlace, de la siguiente manera:
a[target='_blank'] {
background: url(icono_blank.gif) right center no-repeat;
padding-left: 20px;
}O si quieres que un enlace a un .pdf tenga un ícono especial:
a[href $='.pdf'] {
background: url(icono_pdf.gif) right center no-repeat;
padding-left: 25px;
}En este ejempo, con el símbolo $ indicamos que el atributo termina con un .pdf. Otro más:
a[href ^= "mailto:"] {
text-decoration: overline;
}Aquí, si un enlace es a un email a través de mailto (^ quiere decir comienza con) le damos una línea sobre el texto (text-decoration: overline;).
Finalmente, y como me imagino que esperaban, tanta maravilla no funciona en IE6. Más un argumento para enterrarlo de una vez por todas.