soy Kseso y esto EsCSS

Sparkicons: un poco más de luz sobre el contenido del enlace

Qué son los Sparkicons y cómo utilizarlos para ampliar la información de los enlaces

Sparkicons: un poco más de luz sobre el contenido del enlace

·Por Kseso ✎ 1
Sparkicons estilizados en los enlaces El humilde enlace es una increíblemente simple y poderosa herramienta en la web. De hecho, muchos dirían que nuestra capacidad para vincular un recurso a otro a través de hipertextos es lo que hace que la web sea lo que es. Sin embargo, creo que este humilde enlace podría hacer un poco más de lo que actualmente hace.

El problema de los enlaces

El principal problema con los enlaces en la web es que por lo general se desconoce qué nos vamos a encontrar al seguirlo. ¿Qué tipo de documento?: ¿imágenes?. ¿un vídeo?, ¿de qué tamaño?, ¿texto? ¿un html, pdf, word?; ¿una descarga, una aplicación? ¿en el dominio que estoy o en otro diferente?...

Esta carencia se ha intentado resolver de diferentes formas, quizás la más conocida sea añadiendo un pequeño icono representativo del tipo de archivo o para indicar si vas a salir o no del dominio donde estás.

Esto normalmente se logra con el uso de los selectores avanzados por valor del atributo de css (por el tipo del archivo de destino, dominio, etc) y optimizado con el uso de sprites css.

Un ejemplo lo tienes en este blog para distinguir entre los enlaces internos o externos.

Pero el problema es que es sólo una información visual y que la info trasmitida es más bien escueta y que en la mayoría de los casos su uso se limita a listas (ul/ol) de enlaces.

Sparkicons: qué son

La idea del sparkicon es añadir información como metadatos en el propio elemento y que sea esa información la presentada gráficamente al usuario. Se pasa de un mero adorno sólo visual a la presentación de información contenida en el propio elemento.

Sparkicons: una propuesta de implementación

Basado en artículo original de @andydavies Implementing Sparkicons

Como no hay ningún atributo estándar adecuado para almacenar los datos del meta Sparkicon, utiliza los atributos:
data-sparkicon para el tipo de contenido. Por ejemplo: de vídeo, música, pdf, comentarios, étc.
data-sparkicon-plus para incluir información opcional extra, como tamaño, peso, número de comentarios, duración del vídeo, étc.

<a href="http://www.youtube.com/XXX" data-sparkicon="media" data-sparkicon-plus="12:02">Rugby World Cup Highlights</a>

Mostrando Sparkicons

Haciendo uso del pseudoelemento :after y una tipografía de iconos se presenta al visitante de la página la información contenida en el sparkicon como ya se viene haciendo casos similares:

a[data-sparkicon$="media"]:after { content: " " attr(data-sparkicon) attr(data-sparkicon-plus); font-size:xx-small; vertical-align:top; font-family: sparkicons; } @font-face { font-family: "sparkicons"; src: url("data:font/truetype;base64, los datos de la tipografía en este formato u otro cualquiera...""); }

Y el resultado que se muestra es tal cual la imagen:

uso de sparkicons

Sparkicons en acción

Varios sparkicons@andydavies en el artículo enlazado tiene varias realizaciones en jsfiddle:
Un solo sparkicon
Varios sparkicons
Fíjate que los sparkicons de los ejemplos anteriores tienen subrayado, se ven afectados por el text-decoration propio del enlace. Este es un efecto un tanto feo, que a mi personalmente no me gusta. Para evitarlo, mira este artículo del blog.

En el jsFiddle de abajo tienes los sparkicons integrados en un texto y un poco más estilizados:

Consideraciones sobre el uso de sparkicons

Si te planteas hacer uso de los sparkicons deberías plantearte algunas cuestiones, sin olvidar que es sólo una propuesta, no hay nada "oficial" que lo soporte. Además antes necesitará de texteo y verificación en múltiples navegadores.
Si bien el autor del artículo ha probado su correcto funcionamiento en Chrome, Safari y Firefox en OS X e IE9 en Windows, advierte que DataURI no es soportada por IE9 y en IE8 y anteriores el contenido en los pseudoselectores.

Créditos y lecturas

Como te decía al inicio, este artículo y los ejemplos enlazados está basado en el trabajo de @andydavies en su blog.
Si quieres ampliar el concepto de sparkicon y una reflexión sobre el cómo y el porqué de su proposición, el artículo de Marcos Boulton "Sparkicons and the humble Hyperlink" te será de ayuda.

avatar del Editor del blog

the obCSServer ᛯ Ramajero Argonauta, Enredique Amanuense de CSS.
#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Kseso