HTML5, como la mayoría sabemos, aglutina un montón de tecnologías al desarrollo web. El incremento se nota sobre todo en el número de APIs de JavaScript, en la incorporación de nuevos recursos en el CSS que nos evitan usar JavaScript para temas de diseño, y por último tenemos los cambios del propio lenguaje HTML, que destacan por ser pocos: nuevos nombres más descriptivos en las etiquetas, microdatos y los atributos personalizados, el tema que nos concierne.
Estos atributos personalizados nos permiten añadir datos en el HTML sin afectar a su visualización y sin salirnos del propio lenguaje HTML. Posteriormente podemos usar esta información para aplicar estilos CSS (o mostrar esta información con CSS) y podemos tratarla con JavaScript.
Cómo usarlo
En principio el uso más lógico que podemos darle a estos atributos personalizados consiste en generar desde una base de datos un código HTML con datos adicionales sin necesidad de recurrir a elementos ocultos o notación legible para JavaScript.
El funcionamiento es muy simple, al igual que cualquier atributo, dentro de la apertura de la etiqueta HTML añadimos un atributo que comience por data- (por ejemplo: data-cantidad, data-fecha-hora...). En el siguiente ejemplo podemos ver como complementamos la información de unos personajes de Marvel con atributos personalizados.
<li id="marvel-1" data-comics="1423" data-sexo="M">Capitán América</li>
<li id="marvel-2" data-comics="321" data-sexo="F">Capitana Marvel</li>
<li id="marvel-3" data-comics="2575" data-sexo="M">Spider Man</li>El resultado sería transparente para el usuario:
Manipulación con CSS
El CSS de por sí, ya tiene formas de interactuar con los atributos del código HTML, por lo que estos atributos personalizados no suponen una gran diferencia respecto a los normales, pero si nos pueden ayudar a complementar de muchas formas la muestra de los datos.
Lo primero que voy a poner en práctica son los estilos filtrados por atributos, con el siguiente CSS:
li{
color: blue;
}
li[data-sexo='F'] {
color: magenta;
}A continuación vemos cómo el elemento de la lista que contiene la "F" en el atributo data-sexo tiene un color diferente al resto.
- Capitán América
- Capitana Marvel
- Spider Man
Por otro lado tenemos algo aún más curioso, como es la inclusión de información de los atributos en el propio contenido con :before y :after.
li:after {
content: ' (comics: ' attr(data-comics) ')';
color: #999;
}- Capitán América
- Capitana Marvel
- Spider Man
Manipulación con JavaScript
Por otro lado tenemos la forma de manipular estos atributos con JavaScript de una forma muy cómoda, a través del método dataset que incorporan los elementos del DOM. En su interior están todos los atributos personalizados, nombrados en camelCase (por ejemplo: data-fecha-hora se accedería de esta forma: [elemento].dataset.fechaHora).
Con este método podemos leer y escribir estos atributos con total libertad, actualizándose incluso si los usamos de alguna forma en el CSS.
var elemento = document.getElementById("marvel-1");
elemento.dataset.sexo // M
elemento.dataset.comics // 1423
elemento.addEventListener('click', function(){
elemento.dataset.comics++;
}, false);Como vemos en el código anterior, ahora, al pulsar los elementos de la lista de abajo se incrementará el número de cómics (mediante el atributo personalizado).
- Capitán América
- Capitana Marvel
- Spider Man
