Ejemplo:
También tenemos a "thead" y "th" para generar encabezados semánticos a nuestras tablas.
Como en las listas no existe nada de esto, pensé en utilizar el atributo title de todo elemento y combinarlo un poco con los pseudo-elementos "before" y "after" para poder obtener mi título semántico.
El código es el siguiente:
<ul title="Navegadores que soportan título semático en UL OL DL"> <li>IE 8+</li> <li>FF 3+</li> <li>Chrome</li> <li>Opera 6+</li> <li>Safari 4+</li> </ul>
Y el CSS aplicado:
ul{ list-style-type:square; padding-left:20px; } ul:before{ content:attr(title); position:relative; left:-20px; color:blue; font-weight:bold; }
Para obtener este resultado
Como verán los navegadores soportados son:
- IE 8+
- FF 3+
- Chrome
- Opera 6+
- Safari 4+
Pronto prometo incorporar algún fallback para que funcione en aquellos navegadores que no lo soportan.
No hay comentarios:
Publicar un comentario