🤲🏾 🔬 🧑🏻 Una guía completa de datos- * atributos HTML 🤳🏾 🧜🏿 🎢

Le presentamos una traducción del artículo sobre el uso de atributos data-*. Estos son atributos que se pueden usar para almacenar convenientemente información útil en elementos HTML estándar. Esta información, en particular, se puede usar en JavaScript y CSS.

Información general

Los elementos HTML pueden tener atributos que se utilizan para resolver una variedad de problemas, desde proporcionar datos hasta tecnologías de asistencia y elementos de estilo.

<!--  `class`      CSS,  `role`    -->
<div class="names" role="region" aria-label="Names"></div>

No se recomienda crear sus propios atributos o aplicar los atributos existentes de una manera para la que no están diseñados.

<!-- `highlight`   HTML--->
<div highlight="true"></div>

<!-- `large`      `width` -->
<div width="large">

Esto es malo por muchas razones. HTML se genera incorrectamente. Y aunque esto puede no tener consecuencias negativas reales, priva al desarrollador de una sensación cálida causada por el hecho de que crea un código HTML válido. Pero la razón principal por la que no debe hacer esto es porque HTML es un lenguaje que está en constante evolución. Como resultado, si un determinado atributo no se usa en el idioma hoy, esto no significa que nada cambiará en el futuro.

Es cierto que si alguien necesita usar tales atributos, tiene una forma completamente normal de hacerlo. Se trata de crear sus propios atributos, cuyos nombres comienzan con un prefijo data-. Puede trabajar fácilmente con estos atributos, aplicándolos como el programador lo necesita.

Sintaxis

La capacidad de crear sus propios atributos HTML y escribirles datos puede ser extremadamente útil. Esto, como saben, es posible debido a los atributos data-*. Es por esto que tales atributos están destinados. Se parece a esto:

<!--      -->
<div data-foo></div>

<!-- ...     -->
<div data-size="large"></div>

<!--      HTML,    HTML-, , ,      -->
<li data-prefix="Careful with HTML in here."><li>

<!--   -      -->
<aside data-some-long-attribute-name><aside>

Estos atributos, precisamente porque siempre comienzan con un prefijo data-, a menudo se denominan atributos data-*o atributos de datos. Al formar los nombres de estos atributos, la palabra viene primero data, luego guión ( -) y luego el resto del nombre, organizado según las necesidades del desarrollador.

¿Puedo usar un atributo llamado datos?

Aquí hay un código de muestra que usa un atributo llamado data:

<div data=""></div>

Un atributo con este nombre probablemente no dañará a nadie, pero su uso no le permitirá usar herramientas de JavaScript, que discutiremos a continuación. En este ejemplo, el desarrollador, de hecho, crea un cierto atributo propio, que, como ya se mencionó, no se recomienda.

Lo que no debe hacer con los atributos data- *

Dichos atributos no deben contener contenido accesible para las tecnologías de asistencia. Si algunos datos deben estar visibles en la página, o deben poder acceder a los medios para leerlos desde la pantalla, no es suficiente simplemente ponerlos en el atributo data-*. Dichos datos también deberían aparecer en el marcado HTML normal.

<!--      ,     -->
<div data-name="Chris Coyier"></div>

<!--      ,       ,    ... -->
<div>
  <span class="visually-hidden">Chris Coyier</span>
</div>

Aquí hay material sobre cómo ocultar elementos de la página web.

Elementos de estilo con atributos data- *

En CSS, puede seleccionar elementos HTML basados en atributos y sus valores.

/*      ,    */
[data-size="large"] {
  padding: 2rem;
  font-size: 125%;
}

/*    , ,  -  */
button[data-type="download"] { }
.card[data-pad="extra"] { }

Esto puede parecer interesante. Para diseñar en HTML / CSS, las clases se utilizan principalmente. Y aunque las clases son una herramienta maravillosa (difieren en el nivel promedio de especificidad, puede trabajar con ellas utilizando métodos convenientes de JavaScript a través de la propiedad de los elementos classList), un elemento puede tener o no una determinada clase (es decir, la clase en el elemento está "incluida" , o "apagado"). Al usar atributos data-*, el desarrollador también tiene la oportunidad de clases ("activar / desactivar") y la capacidad de seleccionar elementos en función del valor del atributo, que tiene en el mismo nivel de especificidad.

/*  ,      */
[data-size] { }

/*  ,      */
[data-state="open"],
[aria-expanded="true"] { }

/*  " ",      ,    "3",    -   ,   3 -  "3.14" */
[data-version^="3"] { }
/*  ""   ,      -    */
[data-company*="google"] { }

Especificidad de los selectores de atributos

La especificidad de los selectores de atributos es la misma que para las clases. La especificidad a menudo se considera como un valor de 4 partes:

Estilo en línea
CARNÉ DE IDENTIDAD
Clases y Atributos
Etiquetas

Como resultado, si imagina el valor de especificidad para un elemento que solo se estilizó usando un selector de atributos, se verá así 0, 0, 1, 0.

Y aquí hay otro selector:

div.card[data-foo="bar"] { }

Ya se describirá por significado 0, 0, 2, 1. El número 2aparece aquí porque hay una clase ( .card) y un atributo ([data-foo="bar"]). Y 1aquí, debido al hecho de que solo hay una etiqueta ( div).

Aquí, para que quede más claro, una versión ilustrada de estos argumentos.

1 etiqueta, 1 clase y 1 atributo

Para los selectores de atributos, la especificidad es menor que para los identificadores (ID), pero mayor que para las etiquetas (elementos). Su especificidad es igual a la especificidad de las clases.

Valores de atributo que no distinguen entre mayúsculas y minúsculas

Si desea que los selectores seleccionen atributos cuyos valores pueden contener cadenas escritas usando diferentes combinaciones de letras minúsculas y mayúsculas, puede usar la opción de selector sin distinción entre mayúsculas y minúsculas.

/*     
<div data-state="open"></div>
<div data-state="Open"></div>
<div data-state="OPEN"></div>
<div data-state="oPeN"></div>
*/
[data-state="open" i] { }

Este comportamiento garantiza que se use un carácter en el selector i.

Mostrar datos almacenados en datos- * atributos

CSS le permite recuperar valores de atributos data-*y mostrarlos en la página.

/* <div data-emoji=":-)"> */

[data-emoji]::before {
  content: attr(data-emoji); /*  ':-)' */
  margin-right: 5px;
}

Ejemplos de uso de atributos data- * para diseñar elementos

Los atributos data-*se pueden usar para indicar cuántas columnas debe tener un gridcontenedor. Aquí está el código HTML:

<div data-columns="2">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

<div data-columns="3">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

<div data-columns="4">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

Aquí está el CSS relevante:

[data-columns] {
  display: grid;
  grid-gap: 1rem;
  padding: 1rem;
  margin: 0 0 1rem 0;
}

[data-columns] > div {
  height: 100px;
  background: white;
}

[data-columns="2"] {
  background: #64B5F6;
  grid-template-columns: repeat(2, 1fr);
}

[data-columns="3"] {
  background: #9CCC65;
  grid-template-columns: repeat(3, 1fr);
}

[data-columns="4"] {
  background: #FFB74D;
  grid-template-columns: repeat(4, 1fr);
}

Y aquí hay un fragmento de la página resultante.

Contenedores de cuadrícula, que se configuran utilizando los atributos data- *. Puede

experimentar con este ejemplo en CodePen.

Trabajar con atributos data- * en JavaScript

Los valores de atributo data-*se puede acceder, al igual que los valores de otros atributos, utilizando el método getAtributepara la lectura de datos y el método setAttributepara la escritura.

//   
let value = el.getAttribute("data-state");

//   .

//  data-state   "collapsed"
el.setAttribute("data-state", "collapsed");

Sin embargo, los atributos data-*tienen su propia API especial. Supongamos que tenemos un elemento con varios atributos data-*(que es completamente normal):

<span 
  data-info="123" 
  data-index="2" 
  data-prefix="Dr. "
  data-emoji-icon=":-)"
></span>

Si hay un enlace a este elemento, puede leer y escribir los valores de sus atributos de la siguiente manera:

// 
span.dataset.info; // 123
span.dataset.index; // 2

// 
span.dataset.prefix = "Mr. ";
span.dataset.emojiIcon = ";-)";

Tenga en cuenta que la última línea del código JS usa la entrada de nombre de atributo de estilo CamelCase. El sistema convierte automáticamente los nombres de los atributos HTML escritos en el estilo kebab a los nombres escritos en el estilo camel. Es decir, se data-this-little-piggyconvierte en dataThisLittlePiggy.

Esta API, por supuesto, no es tan fácil como la API classList , apoyando métodos claros tales como add, remove, toggley replace, pero aún así es mejor que nada.

En JavaScript, puede trabajar con conjuntos de datos incrustados en elementos:

<img align="center" src="spaceship.png"
  data-ship-id="324" data-shields="72%"
  onclick="pewpew(this.dataset.shipId)">
</img>
<h2><font color="#3AC1EF">JSON-   data-*</font></h2>
<ul>
  <li data-person='
    {
      "name": "Chris Coyier",
      "job": "Web Person"
    }
  '></li>
</ul>

¿Por qué no escribir data-*datos JSON en el atributo ? Después de todo, estas son solo cadenas que pueden formatearse como datos JSON válidos (entre comillas y más). Si es necesario, estos datos se pueden extraer del atributo y analizar.

const el = document.querySelector("li");

let json = el.dataset.person;
let data = JSON.parse(json);

console.log(data.name); // Chris Coyier
console.log(data.job); // Web Person

Acerca del uso de atributos data- * en JavaScript

La idea aquí es utilizar atributos data-*para colocar datos en el código HTML al que se puede acceder desde JavaScript para realizar ciertas acciones.

Una implementación común de este escenario tiene como objetivo organizar el trabajo con bases de datos. Supongamos que tenemos un botón Like:

<button data-id="435432343">Like</button>

Este botón puede tener un controlador de clics que ejecuta una solicitud AJAX al servidor. El controlador, si al usuario le gusta algo usando el botón, aumenta el número de me gusta en la base de datos del servidor. El controlador sabe qué registro particular necesita actualizarse, ya que toma información sobre esto del atributo data-*.

Resumen

Aquí , aquí y aquí están los estándares asociados con los selectores de atributos data-*. Aquí, en el sitio web de Caniuse, puede obtener información sobre la compatibilidad del data-*navegador para los atributos . Si no ha utilizado estos atributos antes, esperamos que este material le haya dado algo para pensar.

¡Queridos lectores! ¿Cómo se utilizan los atributos HTML data- *?

Una guía completa de datos- * atributos HTML