sábado, 16 de noviembre de 2013

Uso del atributo data en html5

Html5 nos permite pasar datos arbitrarios en las etiquetas y que estas sigan siendo válidas sin tener que crear una dtd.

El único requerimiento es que el nombre del atributo de la etiqueta debe empezar por data-.

Así, esto es válido en html5:





E incluso podemos pasar datos en formato json:





Realmente útil y además valida.

Hey!, muy guay! ¿Pero qué hay acerca del tratamiento de estos atributos en la hoja de estilos?. Pues también mola porque podemos tratar los data- como cualquier otro atributo.

Vamos a saludar el santo a todos clientes que se llamen Pepe con CSS:

Rodrígez Pérez, José

Y la hoja de estilo:
div[data-nombre="Pepe"] { 
   background-color: red; 
}
div[data-nombre="Pepe"]:after { 
  content: attr(data-saludo); 
}




Para saber más:

htmldoctor
tutsplus

No hay comentarios: