TagHTML

Tag <label>

Falso

Intenten clickear verdadero. Luego el falso. ¿Se nota la diferencia?

Es frustrante. Quizá hay muchos usuarios que ni se percatan de que clickeando el texto al lado de un checkbox (o cualquier otro tipo de input) pueden accionar sobre él. Pero hay una mayoría (espero) que sabe que al hacer click en el texto de rótulo de un elemento, el mismo se accionará.

Al perder este comportamiento rompemos con la consistencia y eso afecta la experiencia de usuario, en particular la usabilidad del sistema.

Cómo usarlo

Para utilizar un rótulo de este tipo lo único que hay que hacer es utilizar el tag <label for="element-id">, donde el atributo for define el ID del elemento que queremos accionar. También se puede lograr poniendo el input dentro del label, pero no es tan limpio y no se puede hacer en todos los casos.

Como ejemplo, el código de Verdadero/Falso:

<input type="checkbox" id="verdadero" /> <label for="verdadero" id="label-usuario-ok" >Verdadero</label>
<input id="falso" type="checkbox" /> <span id="label-usuario-mal" >Falso</span>

Como comentario aparte, este “error”  es uno de los tantos que pasan desapercibidos por más que el HTML valide perfectamente.

Referencia

  • https://developer.mozilla.org/en/HTML/Element/label

Detectar soporte HTML5 con Modernizr

Modernizr es una biblioteca de funciones que permite detectar el soporte nativo de nuevas y futuras tecnologías en los navegadores web. Dichas tecnologías son implementaciones de las especificaciones de HTML5 y CSS3.

El principal objetivo de Modernizr es proveer una forma confiable de detectar estas implementaciones, para poder sacar provecho de los navegadores o bien proveer una alternativa en caso de que el navegador no implemente la tecnología en cuestión.

Para usarlo simplemente basta con descargar el archivo Javascript y cargarlo desde una página. Automáticamente Modernizr realiza las pruebas correspondientes para detectar las capacidades del navegador y las almacena en forma de booleano en un objeto llamado “Modernizr”, al que podemos acceder dentro de nuestro Javascript.

Por ejemplo, para saber si el navegador soporta la etiqueta <video>, debemos chequear:

if(Modernizr.video){
//código HTML5
}
else{
//código alternativo
}

Al momento de la detección, Modernizr también agrega a la etiqueta <html> clases según las capacidades de nuestro navegador. Por ejemplo, si soporta video, audio y canvas, la etiqueta pasa a ser <html class="audio canvas video">.

Por lo tanto, otro método válido para chequear si el navegador soporta cierta implementación es ver si dicha etiqueta posee la clase correspondiente, acorde a la documentación de Modernizr.

En el ejemplo utilizo este último método para hacer la comprobación.

Demo: HTML5 Tester

Links

© 2018 Nacho Toledo

Theme by Anders NorénUp ↑