Selectores avanzados de atributos

5/jun/2007 8

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.

Ver ejemplo

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;
}

Ver ejemplo

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;).

Ver todos los ejemplos

SafariFirefoxInternet Explorer 7OperaCamino

Finalmente, y como me imagino que esperaban, tanta maravilla no funciona en IE6. Más un argumento para enterrarlo de una vez por todas.

Links:

Comentarios

  1. dubo [#]

    maldito ie6… cuando sera el dia en que su participacion de mercado sea minima

  2. Victor San Martin [#]

    Muy bueno el articulo, ya conocía algo sobre estos selectores, pero tengo la duda si existe algo para que funcione en IE, como por ejemplo existe el csshover.htc o el iepng.htc, estos solucionan esos problemas, no conocen alguno para los selectores?

    Saludos

  3. fearlex [#]

    No habia llegado al final y ya estaba abriendo IE7 para probarlo, y volia funciono, pero, me dije, no creo que funcione en IE6, tanta suerte no puede ser posible y luego de probarlo, lei tus palabras magicas “no funciona en IE6″ 😀

  4. Crëam | Felipe Rubilar [#]

    Son bastante útiles, eso si quiza generel problemas con links en menues en donde no se quiera especificar el tipo de link o el tipo de archivo a mostrar, nada que no se pueda solucionar.

  5. CSSLab Admin [#]

    Crëam, es solo especificar donde quieres q se vea, por ejemplo div#content a[href $=’.pdf’]… salu2.

  6. CSSLab » Menú con tabs con CSS, jQuery y Mootools [#]

    […] el mundo fuera hermoso y no existiera IE6, nos bastaría con un poco de CSS y selectores avanzados de atributos para hacerlo […]

  7. CSSLab - Mejor accesibilidad [#]

    […] deberías indicarle a tus usuarios la tecla correspondiente al accesskey, y los selectores avanzados de atributo son una gran […]

  8. Mi lucha (contra IE6) ↝ CSSLab [#]

    […] me limito con las pseudo-class y selectores avanzados. los estilos degradarán bien, pero no como se verá en mejores […]

Responder a Crëam | Felipe Rubilar ×

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

CSSLab