Una guía completa de atributos de datos | Programar Plus ▷ Tutoriales

Tabla de contenido

Introducción
Sintaxis
Estilo con atributos de datos
Accediendo a atributos de datos en JavaScript

Introducción

Los elementos HTML pueden tener atributos que se utilizan para cualquier cosa, desde información de accesibilidad hasta control estilístico.

<!-- We can use the `class` for styling in CSS, and we've also make this into a landmark region -->
<div class="names" role="region" aria-label="Names"></div>

Lo que se desaconseja es crear sus propios atributos o reutilizar atributos existentes para funciones no relacionadas.

<!-- `highlight` is not an HTML attribute -->
<div highlight="true"></div>

<!-- `large` is not a valid value of `width` -->
<div width="large">

Hay una variedad de razones por las que esto es malo. Su HTML se vuelve inválido, lo que puede no tener consecuencias negativas reales, pero le roba esa sensación cálida y difusa de HTML válido. La razón más convincente es que HTML es un lenguaje vivo y solo porque los atributos y valores que no hacen nada hoy no significa que nunca lo harán.

Sin embargo, hay buenas noticias: puedes crear tus propios atributos. Solo necesitas prefijarlos con data-* ¡y entonces eres libre de hacer lo que quieras!

Sintaxis

Puede ser muy útil poder crear sus propios atributos HTML y poner su propia información dentro de ellos. ¡Afortunadamente puedes! Eso es exactamente lo que datributos de ata son. Son así:

<!-- They don't need a value -->
<div data-foo></div>

<!-- ...but they can have a value -->
<div data-size="large"></div>

<!-- You're in HTML here, so careful to escape code if you need to do something like put more HTML inside -->
<li data-prefix="Careful with HTML in here."><li>

<!-- You can keep dashing if you like -->
<aside data-some-long-attribute-name><aside>

Los atributos de datos a menudo se denominan data-* atributos, ya que siempre tienen ese formato. La palabra data, luego un guión -, luego otro texto que puedas inventar.

¿Puedes usar el `data` atributo solo?

<div data=""></div>

Probablemente no le hará daño a nada, pero no obtendrá la API de JavaScript que cubriremos más adelante en esta guía. Básicamente, estás inventando un atributo para ti mismo, que, como mencioné en la introducción, no se recomienda.

Qué no hacer con los atributos de datos

Almacene contenido que debería ser accesible. Si el contenido debe verse o leerse en una página, no solo los ponga en atributos de datos, sino que asegúrese de que el contenido esté en el contenido HTML en algún lugar.

<!-- This isn't accessible content -->
<div data-name="Chris Coyier"></div>

<!-- If you need programmatic access to it but shouldn't be seen, there are other ways... -->
<div>
  <span class="visually-hidden">Chris Coyier</span>
</div>

Aquí hay más información sobre cómo ocultar cosas.

Estilo con atributos de datos

CSS puede seleccionar elementos HTML en función de los atributos y sus valores.

/* Select any element with this data attribute and value */
[data-size="large"] {
  padding: 2rem;
  font-size: 125%;
}

/* You can scope it to an element or class or anything else */
button[data-type="download"] { }
.card[data-pad="extra"] { }

Esto puede resultar convincente. Los ganchos de estilo predominantes en HTML / CSS son las clases, y aunque las clases son geniales (tienen una especificidad media y buenos métodos de JavaScript a través de classList) un elemento lo tiene o no lo tiene (esencialmente encendido o apagado). Con data-* atributos, obtienes esa capacidad de encendido / apagado más la capacidad de seleccionar en función del valor que tiene en el mismo nivel de especificidad.

/* Selects if the attribute is present at all */
[data-size] { }

/* Selects if the attribute has a particular value */
[data-state="open"],
[aria-expanded="true"] { }

/* "Starts with" selector, meaning this would match "3" or anything starting with 3, like "3.14" */
[data-version^="3"] { }

/* "Contains" meaning if the value has the string anywhere inside it */
[data-company*="google"] { }

La especificidad de los selectores de atributos

Es exactamente lo mismo que una clase. A menudo pensamos en la especificidad como un valor de cuatro partes:

estilo en línea, ID, clases / atributos, etiquetas

Entonces, un solo selector de atributo solo es 0, 0, 1, 0. Un selector como este:

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

…sería 0, 0, 2, 1. El 2 es porque hay una clase (.card) y un atributo ([data-foo="bar"]), y el 1 es porque hay una etiqueta (div).

Los selectores de atributos tienen menos especificidad que una ID, más que un elemento / etiqueta y lo mismo que una clase.

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

En caso de que necesite corregir posibles incoherencias de mayúsculas en los atributos de sus datos, el selector de atributos tiene una variante que no distingue entre mayúsculas y minúsculas.

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

Es el pequeño i dentro del selector entre corchetes.

Usar atributos de datos visualmente

CSS le permite extraer el valor del atributo de datos y mostrarlo si es necesario.

/* <div data-emoji="✅"> */

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

Ejemplo de caso de uso de estilo

Puede usar atributos de datos para especificar cuántas columnas desea que tenga un contenedor de cuadrícula.

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

CodePen Insertar respaldo

Accediendo a atributos de datos en JavaScript

Como cualquier otro atributo, puede acceder al valor con el método genérico getAttribute.

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

// You can set the value as well.
// Returns data-state="collapsed"
el.setAttribute("data-state", "collapsed");

Pero los atributos de datos también tienen su propia API especial. Digamos que tiene un elemento con múltiples atributos de datos (lo cual está totalmente bien):

<span 
  data-info="123" 
  data-index="2" 
  data-prefix="Dr. "
  data-emoji-icon="🏌️‍♀️"
></span>

Si tiene una referencia a ese elemento, puede establecer y obtener atributos como:

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

// Set
span.dataset.prefix = "Mr. ";
span.dataset.emojiIcon = "🎪";

Tenga en cuenta el uso de camelCase en la última línea. Convierte automáticamente los atributos de estilo kebab en HTML, como data-this-little-piggy, al estilo camelCase en JavaScript, como dataThisLittlePiggy.

Esta API posiblemente no es tan buena como classList con el claro add, remove, toggle, y replace métodos, pero es mejor que nada.

También tiene acceso a conjuntos de datos en línea:

<img src="https://css-tricks.com/a-complete-guide-to-data-attributes/spaceship.png"
  data-ship-id="324" data-shields="72%"
  onclick="pewpew(this.dataset.shipId)">
</img>

Datos JSON dentro de atributos de datos

<ul>
  <li data-person='
    {
      "name": "Chris Coyier",
      "job": "Web Person"
    }
  '></li>
</ul>

Oye, ¿por qué no? Es solo una cadena y es posible formatearla como JSON válido (tenga en cuenta las comillas y demás). Puede extraer esos datos y analizarlos según sea necesario.

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

Casos de uso de JavaScript

El concepto es que puede usar atributos de datos para poner información en HTML a la que JavaScript puede necesitar acceso para hacer ciertas cosas.

Uno común tendría que ver con la funcionalidad de la base de datos. Supongamos que tiene un botón “Me gusta”:

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

Ese botón podría tener un controlador de clics que realiza una solicitud Ajax al servidor para incrementar el número de Me gusta en una base de datos al hacer clic. Sabe qué registro actualizar porque lo obtiene del atributo de datos.

Especificaciones

Selectores de nivel 4 (borrador de trabajo)
Selectores de nivel 3 (recomendado)
Selectores de nivel 2, revisión 1 (definición inicial)

Soporte del navegador

Estos datos de soporte del navegador son de Caniuse, que tiene más detalles. Un número indica que el navegador admite la función en esa versión y posteriores.

Escritorio

Cromo	Firefox	ES DECIR	Borde	Safari
7	6	11	12	5.1

Móvil / Tableta

Android Chrome	Android Firefox	Androide	Safari de iOS
96	95	3	5,0-5,1

Una guía completa de atributos de datos | Programar Plus