Señalizar el idioma de los enlaces mediante CSS.

Joan — Mon, 20 Jul 2009 15:14:52 +0000

Todos estamos acostumbrados a ver señalizados los enlaces externos con la típica flecha.

Algo no tan común, y que quería añadir al blog desde el principio, era la de señalizar el idioma de los enlaces externos. Desgraciadamente, en el mundo web el 80% de los contenidos de calidad están en ingles, y hoy en día todavía hay gente a la que esto le supone un problema.

Por ello, he decidido que en este blog se señalizarán aquellos enlaces que lleven a páginas en otros idiomas que no sean castellano, tanto por código como visualmente.

Para señalizar el idioma en del enlace mediante el HTML, es realmente sencillo. Tan solo deberemos utilizar el atributo hreflag

Enlace

El atributo hreflang proporciona a los agentes de usuario información sobre el idioma del recurso del otro extremo del vínculo, igual que el atributo lang proporciona información sobre el idioma del contenido o de los valores de los atributos de un elemento.

Ahora, para mostrar la bandera del idioma, utilizaremos el pseudo-selector :after junto con el selector [attr|=val]

a[hreflang|='en']:after {
content: url(images/gb.png);
margin-left: 3px;
vertical-align: middle;
}

El selector [attr|=val] se utiliza para seleccionar elementos cuyo atributo sea exactamente “val” o empiece por “val” seguido inmediatamente por un guión “-”. Este selector se creó para utilizarlo en el atributo hreflang de los elementos a, por lo que si fue creado especialmente para esto, ¿no vamos a desperdiciarlo, verdad?

Marcando nuestro html correctamente, y mediante una sencilla regla de CSS, ya tendremos señalizados aquellos enlaces que, en este caso, dirijan a páginas en inglés.

Un ejemplo:
Enlace a google.es, en castellano
Enlace a la W3C, en inglés

Documentación.

Selectores por atributos en CSS

Vínculos en HTML

Ponte al día con HTML5.

Joan — Mon, 13 Jul 2009 10:00:40 +0000

Con la salida de Firefox 3.5, parece que ha estallado entre los que nos dedicamos al mundo web la “fivefever”, también conocida como “volerse loco por un lenguaje que, en teoría, aún le quedan 13 años para estar acabado”.

Fuera de bromas, si quieres estar al día de que es lo que se cuece en el “nuevo” HTML5, que ya está soportado por Firefox 3.5 y Safari 4, aquí tienes una recopilación de lo mejor que se ha publicado estos días:

Cheat Sheet para HTML5 en PDF | Smashing Magazine

HTML5 y CSS3, las técnicas del futuro | Nettuts+

Geolocalización en Firefox 3.5 | Mozilla Hacks

HTML5 vence a XHTML2 | W3C

Todas las novedades de HTML5 | Anexom

Tag de HTML5 | aNieto2k

html5Doctor, te ayuda a implementar HTML5, hoy!

html5gallery, hermana de html5doctor, es una galería de páginas realizadas utilizando HTML5

Google Wave, el primer proyecto serio que utilizará HTML5.

¿Conocéis algún otro enlace que debería estar en la lista?

pon css en tu vida! » enlaces

Señalizar el idioma de los enlaces mediante CSS.

Ponte al día con HTML5.