Selectores condicionales en CSS

La participación de EFI (lamentablemente, no tengo la dirección de tu blog), en Identificar vínculos externos, me permitió descubrir una serie de posibilidades que, por lo menos para mi, son novedosas. Sus comentarios abrieron la Caja de Pandora. Allí, marca algunos puntos interesantes y adjunta una dirección para mirar atentamente porque es la punta del ovillo de esta madeja.

Yo me preguntaba si era posible utilizar los selectores CSS condicionales para detectar tipos de archivos de manera automática. La respuesta de EFI fue SI y muestra la técnica.

Primero que nada una advertencia repetida, este tipo de técnica, sólo funciona en los navegadores más modernos como FireFox 2.0, Safari, Opera 9 e IE7 (siempre que se haya definido DOCTYPE adecuadamente), en cualquier otro caso, los selectores serán ignorados.

El truco consiste en utilizar los "selectores de atributos". Por ejemplo, esto permitiría detectar todas las etiquetas A que contengan un vínculo a un archivo PDF:

a[href $='.pdf'] {
  ... propiedades ...
}

Este tipo de selector, se escribe inmediatamente después de la etiqueta y entre corchetes. Su contenido genérico es:

[atributo='valor']

en el caso anterior, el atributo es HREF y el valor utiliza uno de los "operadores" disponibles:

[atributo]
el atributo con cualquier valor: a[href] para todas las etiquetas A que tengan un atributo HREF.

[atributo='valor']
el atributo es exactamente igual al valor: a[href='http://google.com'] para todas las etiquetas A que tengan un atributo HREF="http://google.com".

[atributo^='palabra']
el atributo comienza con esa palabra: a[href='http'] para todas las etiquetas A que tengan un atributo HREF que comience con "http".

[atributo$='palabra']
el atributo termina con esa palabra: a[href='exe'] para todas las etiquetas A que tengan un atributo HREF que termine con "exe".

[atributo*='palabra']
el atributo posee la palabra en cualquier parte.

[atributo~='palabra palabra palabra']
si alguien me lo explica con claridad, lo agradecería :D

Todos los valores deben ser identificadores o palabras. Si el lenguaje es HTML no se distinguen mayúsculas de minúsculas, pero si en XML.

Aquí hay algunos ejemplos:

h1[title] {color: blue;} todos los elementos H1 con título, serán azules

span[class=example] {color: blue;} todos los SPAN cuya clase sea "example" serán azules

span[hello="Cleveland"][goodbye="Columbus"] {color: blue;} todos los SPAN cuyo atributo "hello" sea "Cleveland" y cuyo atributo "goodbye" sea "Columbus"

*[lang=fr] {display : none} oculta todos los elementos cuyo atributo "lang" sea "fr"

Ahora vamos a ver como identificar cierto tipo de archivo y adosarle automáticamente una imagen al vínculo. Por ejemplo, para los archivos PDF tendríamos que tener esta declaración de estilo:

a[href $='.pdf'] {
  padding-right: anchoImagen;
  background: transparent url(URL_imagen) no-repeat center right;
}

donde utilizamos el operador $ para seleccionar todos los vínculos cuya URL termine con .pdf .

Lo mismo, podríamos hacer para cualquier tipo de archivo o, variando el operador, seleccionar los vínculos que apunten a una dirección de correo:

a[href ^="mailto:"] {
  padding-right: anchoImagen;
  background: transparent url(URL_imagen) no-repeat center right;
}

donde ^ indica que el valor debe comenzar con el texto indicado.

No existen limitaciones en el uso de los atributos y nada nos impide crear uno para satisfacer una necesidad especial, por ejemplo:

[miatributo="eseste"] {
  color: red;
}

mostraría en rojo, cualquier etiqueta con ese atributo:

<a href="URL" miatributo="eseste"><un vínculo;>
<p miatributo="eseste"><un texto cualquiera;>

Tampoco hace falta limitarse a verificar una condición ya que puede hacerse con múltiples reglas, por ejemplo:

[atributo1^="palabra1"][atributo2$="palabra2"] {color: blue}

pondrá en azul cualquier etiqueta cuyo atributo1 comience con la palabra1 y cuyo atributo2 termine con la palabra2.

Podríamos extender el uso de los íconos adosados a los vínculos para que, en lugar de mostrar uno común a todos, nos muestre uno específico para cada URL, por ejemplo, leyendo el favicon de la página. Esta técnica requiere JavaScript y puede verificarse en Hyperlinks Cues with Favicons.

Para aplicarlo en Blogger, debemos tener en cuanta algunos detalles.

Primero, debemos identificar los vínculos, eso lo hacemos con a[href ^='http://'] pero NO TODOS, por ejemplo, no queremos que se adosen a los vínculos de la sidebar, ni a los footers, etc, sólo quermos que aparezcan en los posts, así que debemos limitar la selección, mirando en la plantilla cuál es el id o clase del bloque correspondiente, en general, en las plantillas de Blogger Beta es div.post-body, por lo tanto, la declaración sería:

div.post-body a[href ^='http://'] {
  padding-right: anchoImagen;
  background: transparent url(URLimagen) no-repeat center right;
}

Tampoco queremos que se muestren los enlaces internos o si, pero queremos que el ícono sea diferente, en ese caso, agregamos otro selector, a[href *='texto'], donde el texto es una palabra que figure dentro de nuestra URL, en mi caso, debería ser algo así si queremos utilizar otra imagen:

div.post-body a[href *='vagabundia'] {
  padding-right: ancho;
  background: transparent url(URLimagen) no-repeat center right;
}

o así si no queremos que aparezca ninguna:

div.post-body a[href *='vagabundia'] {
  background-image: none ;
  padding-right: 0;
}

Por último, como bien dice EFI, de alguna manera se debe impedir que se adose el ícono cuando se muestran imágenes dentro de un vínculo (eso que hace Blogger por defecto cuando usamos las facilidades del editor). Entonces, hay que indicar que esos enlaces no llevarán una imagen que los distinga:

div.post-body a[href $='.jpg'],
div.post-body a[href $='.gif'],
div.post-body a[href $='.png'] {
  background-image: none ;
  padding-right: 0;
}

Aunque en el comentario me aclara que, extrañamente, sólo logra que funcione para imágenes JPG, mis pruebas me indican que su razonamiento es correcto y funciona para cualquier tipo de archivo, lo que me lleva a pensar que tal vez haya un error sintáctico en alguna parte de sus pruebas o influyan mayúsculas/minúsculas.

La técnica es demasiado nueva y no hay demasiada información sobre el tema pero presiento que es una de las características más interesantes del CSS y aún hay mucho por explorar.

Algunas direcciones donde pueden bajarse paquetes de íconos:

• Sweetie Icons
• Brandspanking New Icons
• Two-Tone Icons
• Iconize
• Iconize TextLinks
• Tango DeskTop
• Nuvola 1
• Nuvola 2
• Tango Mini Icons
• Exquisite
• Sanscons
• Gion
• Vista Inspirated