Cómo construir un UX mejor con datos HTML5 - * Atributos
¿Alguna vez ha deseado agregar datos personalizados a un elemento HTML en particular para luego acceder a ellos con JavaScript? Antes de que HTML5 apareciera en el mercado, almacenar datos personalizados asociados con el DOM era un verdadero problema, y los desarrolladores tenían que usar todo tipo de hacks desagradables, como introducir atributos no estándar o usar el método obsoleto setUserData () para solucionar el problema.
Por suerte, ya no tiene que hacerlo más, ya que HTML5 ha introducido nuevas soluciones globales. datos-* Atributos que hacen posible incrustar información adicional en cualquier elemento HTML. El nuevo datos-* atributos hacer HTML más extensible, por lo tanto le permite construir aplicaciones más complejas, y cree una experiencia de usuario más sofisticada sin tener que usar técnicas de uso intensivo de recursos como llamadas Ajax o consultas de base de datos del lado del servidor.
El soporte del navegador de los nuevos atributos globales es relativamente bueno, ya que son compatibles con todos los navegadores modernos (IE8-10 los admite parcialmente).
Sintaxis de la datos-* Atributos
La sintaxis de lo nuevo. datos-* los atributos son similares a los de los atributos con prefijo de aria. Puede insertar cualquier cadena en minúscula en lugar de la * firmar. También debe asignar un valor a cada atributo en forma de cadena.
Digamos que quieres crear un Sobre nosotros página, y almacene el nombre del departamento donde trabaja cada empleado. No tiene que hacer nada más aparte de agregar el departamento de datos atributo personalizado al elemento HTML apropiado de la siguiente manera:
- John Doe
- fulano de tal
Personalizado datos-* Los atributos son globales, al igual que el clase y carné de identidad atributos, por lo que puede utilizarlos en cada elemento HTML. También puede agregar tantos datos-* atributos a una etiqueta HTML como quieras. En el ejemplo anterior, por ejemplo, puede introducir un nuevo atributo personalizado llamado usuario de datos para almacenar los nombres de usuario de los empleados.
- John Doe
- fulano de tal
Como regla general, si desea agregar su propio atributo personalizado a un elemento HTML, siempre tiene que prefijarlo con datos- cuerda. Del mismo modo, cuando ve un atributo con prefijo de datos en el código de otra persona, puede estar seguro de que es un atributo personalizado introducido por el autor.
Cuándo usar y cuándo no usar atributos personalizados
W3C define la costumbre datos-* atributos como tal:
“Los atributos de datos personalizados están destinados a almacenar datos personalizados privados en la página o aplicación, para los cuales no hay atributos o elementos más apropiados.”
Vale la pena considerar el uso de datos-* atributos cuando no puede encontrar ningún otro atributo semántico para los datos que desea almacenar.
No es la mejor idea utilizarlos únicamente para fines de estilo, ya que puede elegir entre los clase y el estilo atributos Si desea almacenar un tipo de datos para el cual HTML5 tiene un atributo semántico, como el fecha y hora atributo para el Elemento, use que en lugar del atributo con prefijo de datos.
Es importante tener en cuenta que datos-* atributos tienen datos que son Privado a la página o la aplicación., lo que significa que los agentes de usuario los ignorarán, como los robots de los motores de búsqueda y las aplicaciones externas. A los atributos con prefijo de datos solo se puede acceder mediante el código que se ejecuta en el sitio que aloja el HTML.
Personalizado datos-* los atributos son ampliamente utilizados por los marcos frontend, como Bootstrap y Zurb Foundation, también. La buena noticia es que no necesariamente necesita saber cómo escribir JavaScript si desea usar atributos con prefijo de datos como parte de un marco, ya que solo necesita agregarlos al código HTML para activar una funcionalidad de un complemento JavaScript preescrito.
El fragmento de código a continuación agrega información sobre herramientas a la izquierda de un botón en Bootstrap haciendo uso de la conmutador de datos y el colocación de datos atributos personalizados, y asignándoles valores apropiados.
Objetivo datos-* Atributos con CSS
Aunque no se recomienda usar datos-* atributos solo para fines de estilo, puede seleccionar los elementos HTML a los que pertenecen con la ayuda de los selectores de atributos generales. Si desea seleccionar cada elemento que tiene un determinado atributo con prefijo de datos, use esta sintaxis en su CSS:
li [usuario de datos] color: azul;
Tenga en cuenta que no son los nombres de usuario los que se mostrarán en azul en el fragmento de código de arriba, ya que no se pueden ver todos los datos almacenados en los atributos personalizados, sino los nombres de los empleados que figuran en el elementos (en el ejemplo “John Doe” y “fulano de tal”).
Si solo desea seleccionar elementos en los que un atributo con prefijo de datos tome un cierto valor, esta es la sintaxis que se debe usar:
li [data-department = "IT"] border: solid blue 1px;
Puede utilizar todos los selectores de atributos de CSS más complicados, como el selector general de combinador de hermanos ([valor-datos ~ = "foo"]) o el selector de comodines ([valor-datos * = "foo"]), con atributos prefijados de datos también.
Acceso datos-* Atributos con JavaScript
Puede acceder a los datos almacenados en la costumbre. datos-* atributos con JavaScript utilizando la propiedad del conjunto de datos, o jQuery's datos() método.
Vanilla JavaScript
los conjunto de datos propiedad es propiedad de la HTMLElement interfaz, eso significa que puedes usarlo en cualquier etiqueta HTML. los conjunto de datos La propiedad da acceso a toda la costumbre. datos-* Atributos del elemento HTML dado. Los atributos se devuelven como un DOMStringMap objeto que contiene una entrada para cada datos-* atributo.
En nuestro Sobre nosotros ejemplo de página puede comprobar fácilmente los atributos personalizados “fulano de tal” tiene mediante el uso de la conjunto de datos Propiedad de la siguiente manera:
var jane = document.getElementById ("jane"); console.log (jane.dataset); // DOMStringMap usuario: "janedoe", departamento: "IT" Usted puede ver que en el devuelto DOMStringMap objetar el datos- Los prefijos se eliminan de los nombres de los atributos (usuario en lugar de usuario de datos, y Departamento en lugar de departamento de datos). Debe usar los atributos en el mismo formato si solo desea acceder al valor de un determinado atributo con prefijo de datos (en lugar de la lista de todos los atributos personalizados, como en el fragmento de código anterior).
Puede recuperar el valor de un determinado datos-* atributo como una propiedad de la conjunto de datos propiedad. Como mencioné antes, necesitas omitir la datos- prefijo del nombre de la propiedad, así que si desea acceder al valor de Jane's usuario de datos Atributo, puedes hacerlo de esta manera:
var jane = document.getElementById ("jane"); console.log (jane.dataset.user) // janedoe jQuery datos() método
los datos() El método jQuery permite obtener el valor de un atributo con prefijo de datos. Aquí también hay que omitir la datos- Prefijo del nombre del atributo para acceder a él correctamente. En nuestro ejemplo, puede mostrar un mensaje de alerta con el nombre del departamento donde “Jane” Funciona con el siguiente código:
$ ("# jane"). hover (function () var department = $ ("# jane"). data ("departamento"); alerta (departamento);); los datos() El método debe usarse con cuidado, ya que no solo actúa como un medio para obtener el valor de un atributo con prefijo de datos, sino también para adjuntar datos a un elemento DOM de la siguiente manera:
var town = $ ("# jane"). data ("town", "New York"); Los datos extra que adjuntas con jQuery datos() El método obviamente no aparecerá en el código HTML como un nuevo datos-* atributo, por lo que si ambas técnicas se usan al mismo tiempo, el elemento HTML dado almacenará dos conjuntos de datos, uno con HTML y el otro con jQuery.
En nuestro ejemplo “Jane” tiene un nuevo dato personalizado ("pueblo") con jQuery, pero este nuevo par clave-valor no aparecerá en HTML como un nuevo ciudad de datos atributo. Almacenar los datos de dos maneras diferentes no es la mejor práctica por decir lo menos, por lo que Solo usa uno de los dos métodos a la vez..
Accesibilidad y datos-* Atributos
Como los datos mantenidos en la costumbre. datos-* los atributos son privados, es posible que las tecnologías de asistencia no puedan acceder a él. Si desea mantener el contenido accesible para los usuarios discapacitados, no se recomienda almacenar contenido que pueda ser importante para los usuarios de esta manera..
