Details y Summary: efecto acordeón nativo de HTML5
Este Septiembre ha sido mucho más duro de lo esperado. Nuevo trabajo, nuevos estudios, las niñas empiezan al cole ..., y al final me he ido quedando sin tiempo para escribir. Así que una vez dejado atrás Septiembre y tantos cambios, mejor retomamos las buenas costumbres con un post sobre un par de interesantes elementos interactivos de HTML5, que ya hacía algún tiempo me rondaba por la cabeza.
Los elementos details y summary son de esos elementos de HTML5 poco extendidos y por tanto poco conocidos. La excesiva avalancha de posts sobre los elementos semánticos (de la cual yo también soy responsable), ha dejado de lado ciertos elementos que aportan funciones muy interesantes, y que si bien todo esto se puede hacer con Javascript, ¿a quién no le apetece ahorrarse unas cuantas líneas de código?.
Cómo funcionan Details y Summary
Lo primero de todo es ponernos en situación, y bien podría ir a la especificación sobre elementos interactivos, pero para este caso en concreto no creo que sea necesario, pues details no es mas que un widget que permite ocultar contenido y a demanda del usuario mostrarlo. Vamos, que es el típico efecto toggle o de acordeón.
Como complemento a details tenemos el elemento summary, que necesariamente debe ser hijo suyo, y muestra un resumen o leyenda que complementa la información que estamos ocultando. Es un elemento opcional, así que si prescindimos de él será el navegador quien decida el texto a mostrar, por ejemplo "detalles".
Seguro que sólo con lo que te he contado hasta ahora ya se te han ocurrido ejemplos de uso. ¿Tal vez para un spoiler?, ¿o quizás para la ficha técnica de un producto en una tienda online?. Ambas son soluciones sencillas con el uso de estos elementos, pero teniendo en cuante que tanto details como summary admiten otros elementos como hijos suyos, no sólo texto, y además está permitido el anidamiento de varios elementos details, esto da alas a diseñar, por ejemplo, un menú desplegable, y da igual el número de niveles que necesitemos, el ahorro de código es sustancial.
Hay una última particularidad en el elemento details, y es cómo el navegador o agente de usuario conoce el estado de dicho elemento. Se hace de forma binaria, con el atributo open, que se añade al elemento cuando su estado es expandido y se elimina cuando su estado se encuentra colapsado. Por tanto esto nos permite cambiar su estado inicial si añadimos este atributo en el HTML.
Con un ejemplo, seguro que entiendes mejor toda la parrafada que te he soltado hasta ahora:
Aquí hay mucho más de lo que parece
No, no es magia, sólo es HTML5.
<details>
<summary>Aquí hay mucho más de lo que parece</summary>
No, no es magia, sólo es HTML5.
</details>
Un poco de estilo
Aprovechando el atributo open podemos cambiar el aspecto de details cuando este se encuentra expandido con CSS, mediante el selector de atributo.
Lo ideal sería poder darle también estilo a ese triángulo que el navegador genera y que rota para indicar si su estado desplegado o colapsado. Los navegadores Webkit tienen un elemento para esto ::-webkit-details-marker que nos permite cambiar algunos estilos, como el color, el fondo y el tamaño. Sin embargo, a día de hoy, no es posible reemplazar ese triángulo. Aún así, nada nos impide ocultarlo aprovechando este pseudo-elemento y reemplazarlo usando ::before o ::after, o usar alguno de los trucos que has aprendido leyendo este blog.
Soporte en navegadores
Este sea quizás el punto por el cual estos dos elementos no está muy extendidos. Hasta hace bien poco el soporte era únicamente por parte de Chrome, Opera y Safari. A fecha de este artículo Firefox también les da soporte a partir de la versión 49. Por contra, tanto IE como Edge siguen sin darles soporte.
Puedes consultar la página de caniuse para estar al tanto del soporte de estas propiedades en cuanto a navegadores.
¿Y qué hay de la accesibilidad?
La accesibilidad es uno de los puntos negros cuando usamos ciertos tipos de controles, sobre todo cuando somos nosotros los que creamos dichos controles.
En este caso, estamos usando una función nativa de HTML5, y es por tanto el navegador el que nos da soporte para que todo funcione correctamente, con lo cual la accesibilidad también está pensada.
En navegación por teclado el elemento details es accesible con la tecla tabulador y la información oculta puede ser desplegada o colapsada tanto con la tecla enter, como con la barra espaciadora. Todo son ventajas.