Las secciones de contenido que se contraen, a veces descritas como un acordeón, son un patrón común de la IU. Sin embargo, resulta imposible buscar el contenido oculto en las secciones contraídas con la función de búsqueda en la página. Además, no es posible establecer vínculos a fragmentos de texto dentro de regiones contraídas.
El atributo HTML hidden=until-found y el evento beforematch pueden resolver estos problemas. Si agregas hidden=until-found al contenedor de tu contenido oculto, permites que el navegador busque texto en esa región oculta y revele la sección si se encuentra una coincidencia.
Estas funciones están disponibles a partir de Chrome 102, así que echemos un vistazo a cómo funcionan.
Instrucciones de uso
Si tu sitio web ya tiene secciones que se pueden contraer y que deseas que se puedan buscar, reemplaza los estilos que hacen que la sección esté oculta por el atributo hidden=until-found. Si tu página también tiene otro estado que debe sincronizarse con si se revela tu sección o no, agrega un objeto de escucha de eventos beforematch que se activará en el elemento hidden=until-found justo antes de que el navegador lo revele.
Advertencias
Para que la experiencia del usuario sea coherente, el contenido de hidden=until-found debe poder revelarse sin el uso del método "Buscar en la página". No todos los usuarios utilizarán el método de búsqueda en la página, y los navegadores que no sean compatibles con hidden=until-found disfrutarán de la experiencia original del contenido oculto sin que se muestre el resultado del análisis en la página.
Si deseas asegurarte de que el contenido oculto se pueda buscar en navegadores que no son compatibles con hidden=until-found, puedes expandir el contenido oculto en esos navegadores. La detección de características se puede realizar si se verifica la presencia del controlador de eventos beforematch:
if (!(‘onbeforematch' in document.body)) {
// expand all hidden content
}
hidden=until-found aplica la propiedad content-visibility:hidden de CSS, en lugar de la propiedad display:none que aplica el atributo oculto normal. Esto es necesario para buscar el contenido mientras está cerrado, pero también tiene los siguientes efectos secundarios:
- Algunas APIs de diseño, como
getBoundingClientRect, informarán que el contenido oculto dentro del elementohidden=until-foundocupa espacio y tiene una posición en la página. - No se renderizarán los nodos secundarios del elemento
hidden=until-found, pero el elementohidden=until-foundseguirá teniendo un cuadro. Esto significa que las propiedades de CSS, como el borde y el tamaño explícito, seguirán afectando la renderización.
A modo de ejemplo, en la siguiente demostración, se agrega margen, borde y padding al elemento al que se aplicó hidden=until-found. En el lugar en el que aparecerá el contenido oculto, aparecerá un cuadro con un borde gris, que luego se completará con el contenido oculto cuando se muestre. Este es el cuadro del elemento oculto.
Para evitar este problema, agrega el borde a un elemento anidado dentro del contenedor que tenga hidden=until-found.
Hero image de Thomas Bormans.