Las secciones de contenido que se pueden contraer, a veces descrita como un acordeón, son un patrón de IU común. Sin embargo, el contenido oculto en las secciones contraídas se vuelve imposible de buscar mediante la 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 veamos 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 ocultan la sección con el atributo hidden=until-found. Si tu página también tiene otro estado que debe mantenerse sincronizado con si se revela o no tu sección, agrega un objeto de escucha de eventos beforematch que se active en el elemento hidden=until-found justo antes de que el navegador lo revele.
Advertencias
Para que el usuario tenga una experiencia coherente, el contenido de hidden=until-found debe ser revelador sin el uso de la función de búsqueda en la página. No todos los usuarios usarán la función Buscar en la página, y los navegadores que no admitan hidden=until-found obtendrán la experiencia original del contenido oculto sin que se revele la función Buscar en la página.
Si quieres asegurarte de que se pueda buscar tu contenido oculto en navegadores que no admiten hidden=until-found, puedes expandirlo en esos navegadores. Para detectar funciones, puedes verificar la presencia del controlador de eventos beforematch:
if (!(‘onbeforematch' in document.body)) {
// expand all hidden content
}
hidden=until-found aplica la propiedad CSS content-visibility:hidden 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-foundsí tendrá un cuadro. Esto significa que las propiedades CSS, como el borde y el tamaño explícito, aún afectarán la renderización.
Como ejemplo de esto, la siguiente demostración agrega margen, borde y padding al elemento que tiene aplicado hidden=until-found. En el lugar donde aparecerá el contenido oculto, hay un cuadro con un borde gris que, luego, se completa con el contenido oculto cuando se revela. 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.