O recolhimento de seções de conteúdo, às vezes descritas como um acordeão, é um padrão comum da interface. No entanto, o conteúdo oculto nas seções recolhidas se torna impossível de pesquisar usando a pesquisa "Localizar na página". Além disso, não é possível vincular fragmentos de texto a regiões recolhidas.
O atributo HTML hidden=until-found e o evento beforematch podem resolver esses problemas. Ao adicionar hidden=until-found ao contêiner do seu conteúdo oculto, você possibilita que o navegador pesquise o texto nessa região oculta e revele a seção se uma correspondência for encontrada.
Esses recursos estão disponíveis desde o Chrome 102, então vamos conferir como eles funcionam.
Como usar
Se o site já tiver seções recolhíveis que você quer tornar pesquisáveis, substitua os estilos que tornam a seção oculta pelo atributo hidden=until-found. Se a página também tiver outro estado que precisa ser sincronizado com a seção revelada ou não, adicione um listener de eventos beforematch, que será disparado no elemento hidden=until-found antes que ele seja revelado pelo navegador.
Avisos
Para uma experiência do usuário consistente, o conteúdo de hidden=until-found precisa ser revelado sem o uso do recurso "Localizar na página". Nem todos os usuários usarão o recurso "Localizar na página", e os navegadores que não são compatíveis com o hidden=until-found terão a experiência original de conteúdo oculto, sem revelar o recurso.
Para garantir que seu conteúdo oculto seja pesquisável em navegadores que não são compatíveis com hidden=until-found, expanda o conteúdo oculto nesses navegadores. A detecção do recurso pode ser feita verificando a presença do manipulador de eventos beforematch:
if (!(‘onbeforematch' in document.body)) {
// expand all hidden content
}
hidden=until-found aplica a propriedade CSS content-visibility:hidden em vez da display:none em que o atributo oculto normal se aplica. Isso é necessário para pesquisar o conteúdo enquanto ele está fechado, mas também causa estes efeitos colaterais:
- Algumas APIs de layout, como
getBoundingClientRect, vão informar que o conteúdo oculto dentro do elementohidden=until-foundocupa espaço e tem uma posição na página. - Os nós filhos do elemento
hidden=until-foundnão serão renderizados, mas o próprio elementohidden=until-foundainda terá uma caixa. Isso significa que as propriedades CSS como borda e tamanho explícito ainda afetarão a renderização.
Como exemplo, a demonstração a seguir adiciona margem, borda e padding ao elemento com hidden=until-found aplicado. No lugar em que o conteúdo oculto vai aparecer, há uma caixa com uma borda cinza, que é preenchida com o conteúdo oculto quando ele é revelado. Essa é a caixa do elemento oculto.
Para evitar esse problema, adicione a borda a um elemento aninhado dentro do contêiner que tem hidden=until-found.
Imagem principal de Thomas Bormans.