Xitrus está alojado en:
HTML5 ha introducido pocos cambios al lenguaje de etiquetas HTML, los más destacados ha sido el de la inserción de nuevas etiquetas, inclusión de microdatos y el tema que vengo a explicar: los atributos personalizados.
Estos atributos personalizados nos permiten añadir información extra a los elementos de nuestro HTML, simplemente añadiendo un nuevo atributo que comience por data- y seguido del nombre mediante el cual accedemos a esta información complementaria. Podemos usar esta información desde JavaScript y CSS de forma muy cómoda.
- <li data-edad="21" data-pais="ES">Juan Alonso</li>
- <li data-edad="37" data-pais="IT">Manuel Alonso</li>
- <li data-edad="34" data-pais="MX">Raúl Alonso</li>
- <li data-edad="19" data-pais="FR">Luis Alonso</li>
- <li data-edad="24" data-pais="IT">Pablo Alonso</li>
- <li data-edad="23" data-pais="ES">Pepe Alonso</li>
- <li data-edad="21" data-pais="ES">Javier Alonso</li>
Aunque hay muchos modos de enviar datos a una web, y puede que este sea uno de los menos usados, este método nos permite generar páginas HTML con toda la información necesaria, sin necesidad de acudir a llamadas mediante AJAX o a añadir información directamente con JavaScript (mediante arrays o JSON).
Vamos a analizar como manipular y usar estos datos, que pueden ser usados con CSS para diferenciar elementos a la hora de aplicar estilos y para añadirlo como texto en pseudo-elementos :after y :before, además de poder ser usados en JavaScript.
Como hemos visto en la introducción, es muy simple añadir estos datos personalizados, por lo que voy a entrar directamente a su uso.
Lo primero que podemos hacer con este dato, es usarlo en selectores CSS, para aplicar un estilo específico a elementos que contengan cierta información. Siguiendo el ejemplo del inicio, añadiremos el siguiente CSS a varios elementos de la lista.
- li[data-pais='ES'] ,
- li[data-pais='MX'] {
- background: #FFC425;
- }
El otro uso que podemos darle a estos atributos consiste en añadir información al diseño mediante CSS de forma cómoda y eficiente, sin necesidad de JavaScript ni añadir código HTML extra. Lo haremos mediante pseudo-elementos.
- li:before {
- content: attr(data-edad) ' años';
- }
JavaScript ya incorpora métodos para manipular el DOM, incluyendo la capacidad para leer atributos. Pero estos nuevos atributos personalizados tienen su forma fácil de acceso, mediante dataset, que devuelve un objeto con los diferentes atributos.
Los índices de estos objetos son los nombres que suceden a "data-" en camel case. Por ejemplo, si tenemos un atributo llamado "data-lugar-de-nacimiento" podemos acceder a él con [elemento].dataset.lugarDeNacimiento.
También cabe recordar que estos atributos son de lectura y escritura, y se tratan como cualquier otro atributo.
- <li id="elemento" data-edad="19" data-pais="FR" data-lugar-de-nacimiento="Paris">Luis Alonso</li>
- var elemento = document.getElementById("elemento");
- elemento.dataset.edad // 19
- elemento.dataset.pais // FR
- elemento.dataset.lugarDeNacimiento // Paris
- elemento.dataset.edad = 22 // Cambiamos
- elemento.dataset.edad // 22
Este es posiblemente la forma de transmitir más información con el HTML, pero tenemos que tener varias cosas en cuenta, como que los buscadores ignoran esta información, es simplemente un añadido para la hora de desarrollar.
Y la otra cosa que se debe de tener en cuenta es que sobrecargar una página con muchísimos atributos congestiona la propia web y puede disminuir la fluidez de la página, aunque es algo que también ocurre si se pasa información complementaria de otros modos.
Además los atributos personalizados están soportados por la mayoría de los navegadores modernos y antiguos, por lo que se puede usar sin ningún miedo.
Xitrus está alojado en:
