10 nuevas características de HTML 5.1 y cómo usarlas IRL
La especificación de HTML tiene un grandes reparaciones Hace un par de semanas cuando el W3C publicó su nueva recomendación HTML 5.1 en noviembre de 2016. En su reciente publicación en el blog, W3C llamó al nuevo lanzamiento principal el Estándar dorado, Como 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 echar un vistazo a las nuevas características que puede utilizar. sin tocar JavaScript, sin embargo, las mejoras en el fondo de JavaScript también son notables, como se puede ver en el registro oficial de cambios.
Tenga en cuenta que actualmente no todos los navegadores admiten todas estas funciones, así que no olvide verifique el soporte del navegador Antes de usarlos en producción. Si te interesa el Más desarrollo del estándar HTML., También puede consultar el borrador de trabajo de HTML 5.2..
1. Defina múltiples recursos de imagen para un diseño responsivo.
En HTML 5.1, puedes usar srcset atributo para hacer selección de imagen sensible posible. los
los src atributo de la srcset atributos de la
Ejemplo de código:
2. Mostrar u ocultar información extra
Con el
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. Añadir funcionalidad al menú contextual del navegador.
Con el elemento y su type = "context" atributo, puedes agregar funcionalidad personalizada al menú contextual del navegador. Necesitas asignar como el elemento hijo de la etiqueta. los carné de identidad del elemento necesita llevar el mismo valor que el Menú de contexto atributo del elemento al que queremos agregar el menú contextual (que es el elemento en el ejemplo de abajo).
Ejemplo de código:
los etiqueta puede tiene tres tipos diferentes, "caja", "mando" (a la que necesita agregar una acción con JavaScript), y radio. Es posible agregar más de un elemento de menú a un menú contextual, sin embargo, soporte del navegador para esta característica es no muy bien todavía. Chrome 54 no lo admite, y Firefox 50 solo permite la presencia de un menú contextual adicional. A continuación puedes ver cómo funciona el ejemplo de código en Firefox 50.
4. Anidar encabezados y pies de página
HTML 5.1 te permite nidos encabezados y pies de página si cada nivel es contenido dentro de la sección de contenido. La siguiente nota es una captura de pantalla de los documentos de W3C, y asesora a los desarrolladores sobre la forma correcta de anidar encabezados y pies de página..
Esta característica puede ser útil si desea agregar Cabecera elaborada a elementos de seccionamiento semántico., como y . El ejemplo de código a continuación crea una barra lateral dentro del encabezado, la la etiqueta es también un elemento de sección, y agrega información extra sobre el autor en su interior. La barra lateral dentro del encabezado. tiene su propio encabezado También, con un subtítulo y la información de contacto del autor..
Ejemplo de código:
Título del artículo
Introducción del artículo
Otros párrafos…
5. Usa nonces criptográficos para estilos y scripts.
Con HTML 5.1, puedes Añadir nonces criptográficos a los estilos y scripts.. Puedes usar el Puedes agregar el Ejemplo de código: los HTML 5.1 hace posible crear imágenes de ancho cero permitiendo a los desarrolladores utilizar el Ejemplo de código: El uso de los mismos enlaces de origen en su sitio web puede ocasionarle problemas. La vulnerabilidad se llama objetivo =”_blanco” explotar, y es un ataque de phishing desagradable. Puedes (con seguridad) probar cómo funciona este ataque en esta ingeniosa página de demostración de Github, y su código de fondo se puede encontrar aquí en Github. HTML 5.1 ha estandarizado el uso de la Ejemplo de código: HTML 5.1 permite a los desarrolladores crear un vacío los mientras tanto atributo dentro de 6. Crear relaciones de enlace inverso
Rdo atributo a sus enlaces de nuevo. Se definió previamente en HTML 4, sin embargo, no fue compatible con HTML5. HTML 5.1 permite a los desarrolladores utilizar este atributo de nuevo para el y elementos. los Rdo atributo es el opuesto de rel, Especifica la relación del documento actual y el documento vinculado. en sentido inverso (Cómo se relaciona el documento actual con el vinculado).
Rdo atributo se ha incluido en las especificaciones HTML 5.1 principalmente para apoyo RDFa que es ampliamente utilizado formato de marcado de datos estructurados, y amplía el lenguaje HTML.7. Usa imágenes de ancho cero.
anchura atribuir con 0 como valor. Esta función puede ser útil si desea incluir imágenes que no quiero mostrar a los usuarios, como el seguimiento de archivos de imagen. Se recomienda que las imágenes de ancho cero sean utilizado junto con vacío alt atributos.
8. Contextos separados del navegador para prevenir ataques de phishing
rel = "noopener" cual atributo separa los contextos del navegador por lo tanto elimina este problema. Puedes usar rel = "noopener" dentro de y elementos. Tu enlace que no causará problemas.
9. Crea una opción vacía
elemento. los etiqueta puede ser el elemento hijo de la , , o elementos. La posibilidad de tener un vacío puede ser útil si no desea sugerir qué opción deben seleccionar los usuarios, y cuál puede ser útil cuando desea diseñar formularios fáciles de usar.10. Manejar los subtítulos de las figuras con mayor flexibilidad.
