Inklappende inhoudssecties, soms omschreven als een accordeon , zijn een veel voorkomend UI-patroon. Inhoud die in de samengevouwen secties is verborgen, kan echter niet meer worden doorzocht met behulp van zoeken op pagina. Het is ook niet mogelijk om te linken naar tekstfragmenten binnen samengevouwen gebieden.
Het HTML-kenmerk hidden=until-found en de gebeurtenis beforematch kunnen deze problemen oplossen. Door hidden=until-found toe te voegen aan de container voor uw verborgen inhoud, maakt u het voor de browser mogelijk om tekst in dat verborgen gebied te doorzoeken en de sectie te onthullen als er een overeenkomst wordt gevonden.
Deze functies zijn beschikbaar vanaf Chrome 102, dus laten we eens kijken hoe ze werken.
Hoe het te gebruiken
Als uw website al samenvouwbare secties heeft die u doorzoekbaar wilt maken, vervangt u de stijlen die de sectie verborgen maken door het kenmerk hidden=until-found . Als uw pagina ook een andere status heeft die gesynchroniseerd moet worden met het feit of uw sectie wel of niet wordt onthuld, voeg dan een beforematch -gebeurtenislistener toe die wordt geactiveerd op het element hidden=until-found vlak voordat het element door de browser wordt onthuld .
Waarschuwingen
Voor een consistente gebruikerservaring moet de hidden=until-found inhoud zichtbaar zijn zonder het gebruik van 'vind-in-pagina'. Niet alle gebruikers zullen find-in-page gebruiken, en browsers die hidden=until-found niet ondersteunen, krijgen de originele ervaring van verborgen inhoud zonder dat de find-in-page zichtbaar wordt.
Als u er zeker van wilt zijn dat uw verborgen inhoud doorzoekbaar is in browsers die hidden=until-found niet ondersteunen, kunt u de verborgen inhoud altijd in die browsers uitbreiden. Functiedetectie kan worden uitgevoerd door te controleren op de aanwezigheid van de gebeurtenishandler beforematch :
if (!(‘onbeforematch' in document.body)) {
// expand all hidden content
}
hidden=until-found past de content-visibility:hidden CSS-eigenschap toe in plaats van de display:none eigenschap die het reguliere verborgen attribuut toepast. Dit is nodig om de inhoud te doorzoeken terwijl deze gesloten is, maar heeft ook deze bijwerkingen:
- Sommige lay-out-API's, zoals
getBoundingClientRectzullen melden dat de verborgen inhoud in het elementhidden=until-foundruimte in beslag neemt en een positie op de pagina heeft. - Onderliggende knooppunten van het
hidden=until-foundelement worden niet weergegeven, maar hethidden=until-foundelement zelf zal nog steeds een vak hebben. Dit betekent dat CSS-eigenschappen zoals rand en expliciete grootte nog steeds van invloed zijn op de weergave.
Als voorbeeld hiervan voegt de volgende demo marge, rand en opvulling toe aan het element waarop hidden=until-found is toegepast. Op de plaats waar verborgen inhoud zal verschijnen, bevindt zich een vak met een grijze rand, die vervolgens wordt gevuld met de verborgen inhoud wanneer deze wordt onthuld. Dit is de doos van het verborgen element.
Om dit probleem te voorkomen, voegt u de rand toe aan een element dat is genest in de container met hidden=until-found .