10 nuevas características de HTML 5.1 y cómo usarlas IRL

La especificación HTML recibió una gran revisión hace un par de semanas cuando W3C publicó su nueva recomendación HTML 5.1 en noviembre de 2016. En su reciente publicación de blog, W3C llamó a la nueva versión principal el estándar de oro, ya que HTML 5.1 nos proporciona nuevas formas de cómo podemos usar HTML para crear experiencias web más flexibles.

En este artículo, vamos a ver sus nuevas funciones que puede utilizar sin tocar JavaScript, sin embargo, las mejoras del fondo de JavaScript también son notables, como puede ver en el registro oficial de cambios .

Tenga en cuenta que actualmente no todos los navegadores son compatibles con todas estas funciones, por lo que no olvide verificar la compatibilidad con el navegador antes de utilizarlas en producción. Si está interesado en el desarrollo posterior del estándar HTML, también puede consultar el borrador de HTML 5.2.

1. Definir recursos de imágenes múltiples para un diseño receptivo

En HTML 5.1, puedes usar etiquetar junto con el atributo srcset para hacer posible la selección de imagen receptiva . los tag representa un contenedor de imágenes que permite a los desarrolladores declarar diferentes recursos de imágenes para adaptarse al tamaño de la ventana gráfica, la densidad de píxeles de la pantalla, el tipo de pantalla y otros parámetros utilizados en el diseño sensible .

los la etiqueta en sí no muestra nada, funciona simplemente como contexto para los recursos de imágenes múltiples . Debe declarar el recurso de imagen predeterminado como el valor del atributo src del etiqueta, y los recursos de imagen alternativos van dentro de los atributos srcset de y elementos.

Ejemplo de código:

2. Mostrar u ocultar información adicional

Con el

y

etiquetas, puede agregar información extendida a una pieza de contenido. La información adicional no se muestra por defecto, pero si los usuarios están interesados, tienen la opción de echar un vistazo . En su código, se supone que debe colocar el

etiqueta adentro

. Después de la

etiqueta puede agregar la información adicional que desea ocultar.

Ejemplo de código:

Mensaje de error 
 No pudimos terminar de descargar este video. 
 Nombre del archivo: 
 yourfile.mp4 
 Tamaño del archivo: 
 100 MB 
 Duración: 
 00:05:27 

Así es como se ve este ejemplo de código en Firefox 50.0.2:

3. Agregue funcionalidad al menú contextual del navegador

Con el elemento y su atributo type="context", puede agregar funcionalidad personalizada al menú contextual del navegador . Debes asignar como el elemento hijo de la

etiqueta. La id de el elemento necesita tener el mismo valor que el atributo contextmenu del elemento al que queremos agregar el menú contextual (que es el elemento en el siguiente ejemplo).

Ejemplo de código:

 Haga clic derecho 

los la etiqueta puede tener tres tipos diferentes, "checkbox", "command" (a la que debe agregar una acción con JavaScript) y radio . Es posible agregar más de un elemento de menú a un menú contextual, sin embargo, el soporte del navegador para esta función aún no es muy bueno . Chrome 54 no es compatible, y Firefox 50 solo permite la presencia de un menú contextual adicional. A continuación puede ver cómo funciona el ejemplo del código en Firefox 50.

4. Jefes y pies de página de nido

HTML 5.1 le permite anidar encabezados y pies de página si cada nivel está contenido dentro del contenido de sección . La siguiente nota es una captura de pantalla de los documentos W3C, y aconseja a los desarrolladores sobre la forma correcta de anidar el encabezado y el pie de página.

Esta característica puede ser útil si desea agregar encabezados elaborados a elementos de sección semántica, como

y

. El siguiente ejemplo de código crea una barra lateral dentro del encabezado,