La réduction des sections de contenu, parfois décrite comme un accordéon, est un modèle d'interface utilisateur courant. Toutefois, le contenu masqué dans les sections réduites devient impossible à effectuer à l'aide d'une recherche "Find-in-page" (Rechercher sur la page). De plus, il n'est pas possible de créer un lien vers des fragments de texte dans des zones réduites.
L'attribut HTML hidden=until-found et l'événement beforematch peuvent résoudre ces problèmes. En ajoutant hidden=until-found au conteneur de votre contenu masqué, vous permettez au navigateur de rechercher du texte dans cette zone masquée et d'afficher la section si une correspondance est trouvée.
Ces fonctionnalités sont disponibles depuis Chrome 102. Voyons donc comment elles fonctionnent.
Comment l'utiliser ?
Si votre site Web comporte déjà des sections réductibles que vous souhaitez rendre accessibles à l'index de recherche, remplacez les styles qui masquent la section par l'attribut hidden=until-found. Si votre page a également un autre état qui doit rester synchronisé avec l'affichage ou non de votre section, ajoutez un écouteur d'événements beforematch qui sera déclenché sur l'élément hidden=until-found juste avant que l'élément ne soit affiché par le navigateur.
Mises en garde
Pour une expérience utilisateur cohérente, le contenu hidden=until-found doit être dévoilé sans utiliser de recherche sur la page. Tous les utilisateurs n'utilisent pas la recherche sur la page, et les navigateurs qui ne sont pas compatibles avec hidden=until-found bénéficient de l'expérience d'origine du contenu masqué sans révélation de la fonctionnalité Find-in-page.
Pour que votre contenu masqué puisse être recherché dans les navigateurs qui ne sont pas compatibles avec hidden=until-found, vous pouvez toujours étendre le contenu masqué dans ces navigateurs. Pour détecter les fonctionnalités, vous pouvez vérifier la présence du gestionnaire d'événements beforematch:
if (!(‘onbeforematch' in document.body)) {
// expand all hidden content
}
hidden=until-found applique la propriété CSS content-visibility:hidden au lieu de la propriété display:none appliquée par l'attribut masqué standard. Cette opération est nécessaire pour effectuer des recherches dans le contenu lorsqu'il est fermé, mais a également les effets secondaires suivants:
- Certaines API de mise en page telles que
getBoundingClientRectsignalent que le contenu caché dans l'élémenthidden=until-foundprend de l'espace et occupe une position sur la page. - Les nœuds enfants de l'élément
hidden=until-foundne seront pas affichés, mais l'élémenthidden=until-foundlui-même comportera toujours une zone. Cela signifie que les propriétés CSS telles que la bordure et la taille explicite continuent d'affecter l'affichage.
À titre d'exemple, la démonstration suivante ajoute une marge, une bordure et une marge intérieure à l'élément auquel hidden=until-found est appliqué. À l'endroit où le contenu masqué apparaîtra, se trouve une case avec une bordure grise, qui se remplit alors avec le contenu masqué lorsqu'il est révélé. Il s'agit de la zone de l'élément masqué.
Pour éviter ce problème, ajoutez la bordure à un élément imbriqué dans le conteneur qui contient hidden=until-found.
Image principale de Thomas Bormans