Minimierbare Inhaltsabschnitte, die manchmal als Akkordeon bezeichnet werden, sind ein gängiges UI-Muster. Inhalte, die in den minimierten Bereichen ausgeblendet sind, können jedoch nicht mehr mit der Suchfunktion auf einer Seite gesucht werden. Außerdem ist es nicht möglich, innerhalb minimierter Bereiche Verknüpfungen mit Textfragmenten zu erstellen.
Mithilfe des HTML-Attributs hidden=until-found und des Ereignisses beforematch lassen sich diese Probleme beheben. Wenn Sie hidden=until-found zum Container für Ihre ausgeblendeten Inhalte hinzufügen, kann der Browser Text in diesem verborgenen Bereich durchsuchen und den Abschnitt anzeigen, wenn eine Übereinstimmung gefunden wird.
Diese Funktionen sind ab Chrome 102 verfügbar. Sehen wir uns einmal an, wie sie funktionieren.
SEO-Prüfungen durchführen
Wenn Ihre Website bereits minimierbare Bereiche enthält, die suchbar sein sollen, ersetzen Sie die Stile, durch die der Bereich ausgeblendet wird, durch das Attribut hidden=until-found. Wenn Ihre Seite einen weiteren Status aufweist, der synchronisiert werden muss, unabhängig davon, ob Ihr Abschnitt angezeigt wird oder nicht, fügen Sie einen beforematch-Event-Listener hinzu, der für das hidden=until-found-Element ausgelöst wird, bevor das Element im Browser sichtbar wird.
Wichtige Hinweise
Für eine einheitliche Nutzererfahrung sollte der Inhalt von hidden=until-found auch ohne Suche auf der Seite auffindbar sein. Nicht alle Nutzer verwenden die Funktion „In-Page suchen“. In Browsern, die hidden=until-found nicht unterstützen, können ausgeblendete Inhalte wie gewohnt angezeigt werden, ohne dass das „In-Page suchen“-Objekt enthüllt wird.
Wenn du sichergehen möchtest, dass deine ausgeblendeten Inhalte auch in Browsern durchsucht werden können, die hidden=until-found nicht unterstützen, kannst du die ausgeblendeten Inhalte in diesen Browsern maximieren. Zur Funktionserkennung muss geprüft werden, ob der Event-Handler beforematch vorhanden ist:
if (!(‘onbeforematch' in document.body)) {
// expand all hidden content
}
hidden=until-found wendet die CSS-Eigenschaft content-visibility:hidden anstelle der Eigenschaft display:none an, auf die das reguläre ausgeblendete Attribut angewendet wird. Dies ist erforderlich, um den Inhalt zu durchsuchen, während er geschlossen ist. Das hat jedoch auch folgende Auswirkungen:
- Einige Layout-APIs wie
getBoundingClientRectmelden, dass die ausgeblendeten Inhalte innerhalb deshidden=until-found-Elements Platz beanspruchen und eine Position auf der Seite haben. - Untergeordnete Knoten des
hidden=until-found-Elements werden nicht gerendert, aber dashidden=until-found-Element selbst hat weiterhin eine Box. Das bedeutet, dass CSS-Eigenschaften wie Rahmen und explizite Größe sich nach wie vor auf das Rendering auswirken.
In der folgenden Demo werden dem Element, auf das hidden=until-found angewendet wurde, ein Rand, ein Rahmen und ein Innenrand hinzugefügt. An der Stelle, an der ausgeblendete Inhalte erscheinen, befindet sich ein Feld mit einem grauen Rahmen, das sich dann mit den verborgenen Inhalten füllt, wenn sie eingeblendet werden. Dies ist das Feld des ausgeblendeten Elements.
Um dieses Problem zu vermeiden, fügen Sie den Rahmen zu einem Element hinzu, das im Container mit hidden=until-found verschachtelt ist.
Hero-Image von Thomas Bormans.