As seções de conteúdo colapsadas, às vezes descritas como um acordeão, são um padrão comum de interface. No entanto, o conteúdo oculto nas seções recolhidas se torna impossível de pesquisar usando a pesquisa "Encontrar na página". Além disso, não é possível vincular a fragmentos de texto dentro de 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 texto nessa região oculta e revele a seção se uma correspondência for encontrada.
Esses recursos estão disponíveis a partir do Chrome 102, então vamos conferir como eles funcionam.
Como usar
Se o seu site já tem seções colapsáveis que você quer tornar pesquisáveis, substitua os estilos que ocultam a seção pelo atributo hidden=until-found. Se a página também tiver outro estado que precisa ser mantido em sincronia com a exibição ou não da seção, adicione um listener de evento beforematch que será acionado no elemento hidden=until-found logo antes de o elemento ser revelado pelo navegador.
Advertências
Para uma experiência do usuário consistente, o conteúdo hidden=until-found precisa ser revelado sem o uso da função "Encontrar na página". Nem todos os usuários vão usar a função "Encontrar na página", e os navegadores que não oferecem suporte a hidden=until-found vão ter a experiência original de conteúdo oculto sem a revelação de conteúdo oculto.
Se você quiser garantir que seu conteúdo oculto possa ser pesquisado em navegadores que não oferecem suporte a hidden=until-found, é possível expandir o conteúdo oculto nesses navegadores. A detecção de recursos pode ser feita verificando a presença do gerenciador 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 propriedade display:none, que é aplicada ao atributo oculto normal. Isso é necessário para pesquisar o conteúdo enquanto ele está fechado, mas também tem estes efeitos colaterais:
- Algumas APIs de layout, como
getBoundingClientRect, informam 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 do CSS, como borda e tamanho explícito, ainda vão afetar a renderização.
Como exemplo, a demonstração a seguir adiciona margem, borda e padding ao elemento que tem hidden=until-found aplicado. No lugar onde o conteúdo oculto vai aparecer, há uma caixa com uma borda cinza, que é preenchida com o conteúdo oculto quando ele é revelado. Esta é 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.