Logotipo de Xitrus.
sígueme en facebook

Sígueme

R L E F G I

Buscar

Cargando

Lo último del blog

Twitter

Hosting

Xitrus está alojado en:

Xitrus está alojado en Cyberneticos.
14
5

Atributos personalizados en HTML5 con data-*

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.

  1. <li data-edad="21" data-pais="ES">Juan Alonso</li>
  2. <li data-edad="37" data-pais="IT">Manuel Alonso</li>
  3. <li data-edad="34" data-pais="MX">Raúl Alonso</li>
  4. <li data-edad="19" data-pais="FR">Luis Alonso</li>
  5. <li data-edad="24" data-pais="IT">Pablo Alonso</li>
  6. <li data-edad="23" data-pais="ES">Pepe Alonso</li>
  7. <li data-edad="21" data-pais="ES">Javier Alonso</li>
Ejemplo del uso de atributos personalziados.

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.

Manipulación con CSS

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.

  1. li[data-pais='ES'] ,
  2. li[data-pais='MX'] {
  3. background: #FFC425;
  4. }
  • Juan Alonso
  • Manuel Alonso
  • Raúl Alonso
  • Luis Alonso
  • 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.

    1. li:before {
    2. content: attr(data-edad) ' años';
    3. }
  • Juan Alonso
  • Manuel Alonso
  • Raúl Alonso
  • Luis Alonso
  • Manipulación con JavaScript

    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.

    1. <li id="elemento" data-edad="19" data-pais="FR" data-lugar-de-nacimiento="Paris">Luis Alonso</li>

    1. var elemento = document.getElementById("elemento");
    2. elemento.dataset.edad // 19
    3. elemento.dataset.pais // FR
    4. elemento.dataset.lugarDeNacimiento // Paris
    5. elemento.dataset.edad = 22 // Cambiamos
    6. elemento.dataset.edad // 22

    Resumen

    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.

    Comentarios

    Sígueme

    R L E F G I

    Buscar

    Cargando

    Lo último del blog

    Twitter

    Hosting

    Xitrus está alojado en:

    Xitrus está alojado en Cyberneticos.
    Cerrar sesión
    Usuario: Contraseña: