View
16
Download
2
Embed Size (px)
Citation preview
Agregar íconos a los links con CSS3
Publicado el Viernes, 18 Mayo 2012
(Tiempo estimado: 3 - 5 minutos)
inShare1
En este artículo vamos a ver una forma de emplear los pseudo-elementos ":before" y
":after", en combinación con la propiedad content y los selectores de atributos,
para agregar un ícono a nuestros enlaces de manera selectiva, dependiendo del contenido
al que apunte el enlace. Con esto no solo podemos darle un estilo fresco al diseño del sitio,
sino que también vamos a mejorar la usabilidad del mismo ya que le evitamos sorpresas
al usuario al indicarle de antemano el tipo de contenido que está por abrir, sobre todo si se
trata de documentos de Office o archivos PDF que solicitan la descarga del mismo.
Antes vamos a repasar un par de conceptos.
Empleando los Selectores de Atributos
Para distinguir el contenido al que apuntan nuestros enlaces desde la hoja de estilos, vamos
a hacer uso de los selectores de atributos de CSS2 y de CSS3, que permiten seleccionar
elementos HTML en función de sus atributos y/o valores de esos atributos. La sintaxis CSS
para seleccionar un elemento en base al valor de un determinado atributo es la siguiente:
elemento[atributo='valor'] { Los estilos van aquí }
Esto selecciona los elementos que tienen establecido un atributo llamado
nombre_atributo con un valor igual a valor, y les aplica los estilos que definamos
para esta regla. Por ejemplo, para aplicar un color a todos los enlaces externos del sitio (los
que tengan el atributo target='_blank') lo hacemos de esta manera:
a[target='_blank'] {
color: #666;
}
El selector que usamos (=, “igual a”) está soportado desde la versión 2.1 de CSS. A partir
de CSS3 se añadieron tres nuevos selectores de atributos:
elemento[atributo^='valor'], selecciona todos los elementos que
disponen de ese atributo y cuyo valor comienza exactamente por la cadena de texto
indicada ("Begins with" selector).
elemento[atributo$='valor'], selecciona todos los elementos que
disponen de ese atributo y cuyo valor termina exactamente por la cadena de texto
indicada ("Ends with" selector).
elemento[atributo*='valor'], selecciona todos los elementos que
disponen de ese atributo y cuyo valor contiene la cadena de texto indicada
("Contains" selector).
Con ellos podemos aplicar un estilo a un enlace que apunte a un documento con una
determinada extensión, como PDF por ejemplo, verificando que dicha extensión exista al
final del mismo, de la siguiente manera:
a[href$='.pdf'] {
color: #666;
}
Empleando los pseudo-elementos :before y :after
Existen varios pseudo-elementos en CSS, dentro de los cuales encontramos los pseudo-
elementos :before y :after, los cuales se utilizan en combinación con la propiedad
content de CCS para crear un elemento falso de contenido en insertarlo antes o después
del contenido original del elemento. Dicho contenido no se visualiza en el DOM de
nuestro HTML, pero puede recibir un estilo CSS.
Por ejemplo, el siguiente código agrega contenido al final de un párrafo:
p:before {
content: " Contenido generado mediante CSS ";
}
Modificando el CSS de nuestro sitio
Aplicando lo visto hasta el momento, vamos a emplear la técnica en nuestro sitio. La idea
es simple: si un enlace apunta, por ejemplo, a un documento con extensión PDF, vamos a
mostrar un icono PDF al final del enlace. Solo necesitamos agregar el siguiente código CSS
a nuestra hoja de estilo:
/* Muestra un icono junto a los enlaces que comienzan con 'http' */
a[href^='http']:after {
content: " " url(icon-external-link.png);
}
/* Muestra un icono junto a los enlaces que terminan con '.pdf' */
a[href$='.pdf']:after {
content: " " url(icon-pdf.png);
}
/* Muestra un icono junto a los enlaces que terminan con '.doc' */
a[href$='.doc']:after {
content: " " url(icon-doc.png);
}
/* Muestra un icono junto a los enlaces que terminan con '.xls' */
a[href$='.xls']:after {
content: " " url(icon-xls.png);
}
/* Muestra un icono en los enlaces que comienzan con 'mailto' */
a[href^='mailto']:after {
content: " " url(icon-mail.png);
}
Ejemplos:
Enlace normal
Enlace externo
Enlace a un documento .PDF
Enlace a un documento .DOC
Enlace a un documento .XLS
Enlace a una dirección de correo electrónico
Luego, solamente es cuestión de probar con diferentes extensiones de archivo, como
fuentes RSS, archivos .SWF o .FLV, etc.
Problema con Imágenes con enlaces
Ahora bien, puede que tengamos imágenes con un enlace a contenido externo en nuestros
artículos, o enlaces donde no queramos que se aplique ningún ícono por defecto. Para
solucionar este problema, vamos a crear una clase CSS y se la vamos a aplicar a dichos
enlaces que no queramos “iconizar”, de la siguiente manera:
.imageLink {
content: "";
}
Navegadores soportados
Podemos ver una lista de los navegadores que soportan los pseudo-elementos :before y
:after en el sitio de CSS-Tricks, que incluye las versiones iguales o superiores a Firefox
3.5, a IE 8 y a todas las versiones de Chrome.