Les sections de contenu réductibles, parfois décrites comme un accordéon, sont un modèle d'UI courant. Toutefois, il est impossible de rechercher du contenu masqué dans les sections réduites à l'aide de la recherche dans la page. De plus, il n'est pas possible d'ajouter de lien vers des fragments de texte dans des régions 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 région masquée et de révéler la section si une correspondance est trouvée.
Ces fonctionnalités sont disponibles à partir de Chrome 102. Voyons comment elles fonctionnent.
Comment l'utiliser ?
Si votre site Web comporte déjà des sections réductibles que vous souhaitez rendre disponibles pour la recherche, remplacez les styles qui rendent la section masquée par l'attribut hidden=until-found. Si votre page comporte également un autre état qui doit être synchronisé avec l'affichage ou non de votre section, ajoutez un écouteur d'événement beforematch qui sera déclenché sur l'élément hidden=until-found juste avant que l'élément ne soit révélé par le navigateur.
Mises en garde
Pour une expérience utilisateur cohérente, le contenu hidden=until-found doit pouvoir être révélé sans utiliser la recherche dans la page. Tous les utilisateurs n'utiliseront pas la recherche dans la page. Les navigateurs qui ne sont pas compatibles avec hidden=until-found bénéficieront de l'expérience originale du contenu masqué sans que la recherche dans la page ne le révèle.
Si vous souhaitez vous assurer que votre contenu masqué est accessible dans les navigateurs qui ne sont pas compatibles avec hidden=until-found, vous pouvez toujours développer le contenu masqué dans ces navigateurs. Vous pouvez effectuer la détection de fonctionnalités en vérifiant 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 hidden standard. Cela est nécessaire pour rechercher le contenu lorsqu'il est fermé, mais présente également les effets secondaires suivants:
- Certaines API de mise en page telles que
getBoundingClientRectindiquent que le contenu masqué dans l'élémenthidden=until-foundprend de la place 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 auront toujours une incidence sur le rendu.
Par exemple, la démonstration suivante ajoute une marge, une bordure et une marge intérieure à l'élément auquel hidden=until-found est appliqué. À la place du contenu masqué, un cadre avec une bordure grise s'affiche, qui se remplit ensuite du 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 contenant hidden=until-found.