🔗Índice
- Introducción
- Acordeón en HTML5
- Acordeón exclusivo en HTML5
- ¿Y el Can I Use?
- Referencias
- Conclusiones
1. Introducción
Personalmente considero que HTML es el lenguaje de marcado más importante de todo internet, cuando abres una página web cualquiera te aseguro que la estructura de la misma está escrita en HTML.
Muchos pueden dar por sentado que HTML no es tan importante pero es la base de toda la web moderna y por este motivo es que ha ido evolucionando siempre, desde API's nuevas que podemos usar hasta características más simples pero importantes de conocer.
2. Acordeón en HTML5
Los acordeones en HTML se escriben usando la etiqueta details y anidando etiquetas summary para representar cada acordeón.
Antes de los acordeones exclusivos no era posible que el comportamiento de cada acordeon sea independiente usando solo HTML nativo, esto quiere decir que múltiples acordeones podían estar abiertos al mismo tiempo. Veamos un ejemplo:
En este ejemplo podemos notar que los acordeones pueden estar abiertos al mismo tiempo que es el comportamiento por defecto.
3. Acordeón exclusivo en HTML5
Desde septiembre del 2024 la novedad es que podemos crear acordeones exclusivos de manera nativa sin usar nada de JavaScript.
Un acordeón exclusivo permite que solo una etiqueta summary esté abierta, mejorando la UI sin complicarnos escribiendo código JS para lograr esto.
Para conseguirlo basta con agregar el atributo name con el mismo valor a cada etiqueta summary.
Veamos un ejemplo:
En nuestro ejemplo cada summary tiene name="learn-css" lo que permite que el acordeón sea exclusivo.
4. ¿Y el Can I Use?
Podemos encontrar que esta funcionalidad está disponible desde las siguientes versiones de navegadores:
Y consultando Can I Use verificamos lo mismo teniendo un 89.13% de los navegadores cubiertos a la fecha de la publicación de este post.
5. Referencias
6. Conclusiones
Es muy importante estar al día con las últimas novedades de las herramientas que más usamos, estas características nuevas nos pueden salvar más de una vez facilitando nuestro trabajo.
Te dejo un post resumen en mi cuenta de twitter:
Otros post de mi autoría que te pueden interesar:
Top comments (0)