BlogMundi

Seguro que alguna vez navegando has hecho clic en algún vínculo y éste te ha llevado a una página distinta, abandonando el sitio actual. Probablemente si lo hubieras sabido, habrías esperado para pinchar, lo habrías abierto en una nueva ventana o en una nueva pestaña.

Mucha gente opta, en sus blogs o sitios web, por hacer que se abran en una nueva ventana, incluso existe un plugin para Wordpress que lo hace automáticamente. No obstante, no parece la mejor solución interfieres en la navegación del usuario y, por otro lado, no suele ser bien acogida la apertura de ventanas.

Así que, en lugar de hacer eso, puede ser mejor idea indicar de alguna forma qué links nos van a llevar a otro sitio. En la Wikipedia has podido observar que lo hacen mediante un iconito y es justamente eso lo que vamos a hacer mediante CSS.

Una de las maneras sería crear una clase distinta .enlaceExt, que podríamos aplicar a todos los enlaces que no fueran de nuestro sitio. Pero claro, eso supondría añadir esa clase cada vez que incluyerámos un enlace de otro sitio, sin contar además, todos los enlaces que ya tiene nuestro blog o página en posts anteriores y que deberíamos modificar uno a uno.

La solución más adecuada pasa por utilizar selectores de atributo y CSS 3. A pesar de que todavía no es una especificación aprobada, algunos navegadores ya soportan estos selectores CSS 3. Aunque, tendremos problemas para validar el código.

Bueno vayamos al asunto, como te habrás fijado y si no, puedes hacerlo ahora he adoptado la solución para este blog. Así, cualquier enlace externo está indicado mediante un iconito que parece el estándar para señalar los links externos.

Es éste: (si no te apetece crear uno, puedes utilizar éste sin problema)

Para que todos los enlaces externos incorporen la imagen de fondo debes editar tu hoja de estilos de la siguiente forma:

Esta primera parte indica que todos los enlaces con el texto http tengan las siguientes propiedades:

a[href^="http"] {
background:url(images/externo.gif) no-repeat right top;
padding-right: 10px;
}

Pero claro, eso haría que resaltase también los vínculos internos, para evitarlo tenemos que indicar que los vínculos de nuestro dominio sean diferentes, eliminamos la imagen y el relleno:

a[href^="http://www.tusitioweb.com"],
a[href^="http://tusitioweb.com/"] {
background-image: none;
padding-right: 0;;
}

Esta técnica no es compatible con Internet Explorer 6 o inferior, así que la ignoraran, y sí lo es con navegadores como Firefox y Safari. Además de Internet Explorer 7 que también la soporta.