¿Qué son los Custom Data Attributes?

29980

En este tutorial, voy a explicarte qué es HTML5 custom data attributes, cómo usarlos y en qué casos deberíamos usarlos. Con el fin de hacernos la vida más fácil a nosotros, los desarrolladores.

¿Qué son los Custom Data Attributes?

Para tener contexto, explicaré una parte de la historia de HTML. En épocas pre-HTML5 era muy complicado guardar información asociada a diferentes elementos del DOM. Uno se veía obligado a guardar la información a atributos como el class o id, y como estos no estaban y actualmente siguen sin ser diseñados para guardar información, se introdujeron los Custom Data Attributes en la llegada de HTML5.

En palabras sencillas, los CDA son todos los atributos de un elemento cuyo nombre comienza con data-*, entonces podríamos declarar simples elementos HTML como objetos programáticos llenos de información.

<divid="post"class="post"data-post-id="15784"data-type="tech-post"data-views="300"data-user="davos_"data-ranking="100"data-nro-comments="804">
Esto es un post
</div>

Ahora ya podemos obtener y manipular toda la información del elemento desde Javascript de una forma fácilmente accesible. OJO, no es recomendado poner información sensible, como contraseñas, en los atributos data. Debido a que estos pueden ser manipulados por personas con conocimiento web. Por lo que se debe usar solo con información no esencial.

Además del prefijo data-, los nombres de los CDA deben contener solo letras, números, comas ( - ) o puntos ( . ), dos puntos ( : ) o guión bajo ( _ ), no debe contener letras en mayúscula, los valores guardados deben ser de tipo string y un elemento puede tener cualquier número de atributos data que quiera.

Usando los Atributos Data

Tomando el ejemplo de los Posts, podemos estilizar los elementos dependiendo del tipo de post usando los selectores de atributos, así uno puede cambiar el color de texto de un post. He aquí otro ejemplo.

.post[data-type='tech-post'] {
	color: blue;
}

.post[data-type='marketing-post'] {
	color: red;
}

.post[data-type='design-post'] {
	color: green;
}

<h4>Por Javascript!</h4>

Existen dos formas de acceder y manipular los atributos data. La primera forma es por medio del método getAttribute() y setAttribute(), entonces tendríamos que poner de argumento el atributo que desea obtener.
De esta forma!

const post = document.querySelector('#post');
const ranking = post.getAttribute("data-ranking");

Asímismo, podemos hacer modificaciones a un valor de un atributo data.

...
post.setAttribute("data-ranking", "200");

La segunda forma es el estándar que se recomienda usar porque es más simple, es la propiedad dataset del elemento HTML. Esta propiedad retorna un objeto DOMStringMap que se puede leer por cada atributo data.

Antes de los ejemplos, existen algunos detalles que se deben tomar en cuenta:

Los guiónes se eliminan y el nombre del atributo es transformado a camelCase.
El prefijo data- es removido del nombre del atributo.

data-user -> userdata-ranking -> rankingdata-post-id -> postIddata-nro-comments -> nroComments

Cualquier guión que no esté seguido de una letra en minúscula no será transformado a camelCase.

data-nro-Comments -> nro-Comments

Ahora con los detalles cubiertos, podemos proseguir a los ejemplos de manipulación de data con la web API dataset.

const post = document.querySelector('#post');

post.dataset.postId; // "15784"
post.dataset.type; // "tech-post"
post.dataset.views; // "300"
post.dataset.user; // "davos_"
post.dataset.ranking; // "100"
post.dataset.nroComments; // "804"

Y también permite modificaciones a los valores.

...
post.dataset.ranking = 500// esto cambiaría el atributo a "500"

Usos Comunes

Uno de los frecuentes usos de los atributos data, son los bien conocidos tooltips. Los tooltips son mensajes que aparecen cuando el usuario posiciona su cursor por encima de un elemento que tenga un tooltip. Estos mensajes indican al usuario cierto contenido adicional que este debería saber.
Veamos un sencillo ejemplo de tooltip!

<spanclass="tooltip"data-tooltip="Este es un adicional mensaje!">Un mensaje normal</span>

html {
  font-family: 'Lato';
  line-height: 1.5;
  font-size: 1.25em;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

span.tooltip {
  padding: .8em;
  position: relative;
  color: white;
  background: #373D49;
  cursor: pointer;
}

span.tooltip::before {
  /* la función attr() retorna el valor de un atributo del
  elemento seleccionado y la propiedad content muestra el valor
  como texto del atributo */content: attr(data-tooltip);
  position: absolute;
  top: 100%;
  font-size: 0.9em;
  padding: 1px5px;
  display: none;
  color: white;
  background: rgba(0, 0, 0, 0.75);
  border-radius: 4px;
  transition: opacity 0.3s ease-out;
  z-index: 99;
  text-align: left;
}

span:hover::before {
  display: inline-block;
}

Visualizable en Codepen!

Más Detalles

Los atributos data-* están solo disponibles en el document HTML, esto quiere decir que cualquier sistema externo no debería tener acceso a estos atributos, incluyendo los motores de búsqueda. Por lo tanto, no son adecuados para una estructuración semántica de datos a diferencia de schema.org.

hace 6 años