hidden

Das hidden-Attribut wird verwendet, um anzuzeigen, dass der Inhalt eines Elements dem Benutzer nicht präsentiert werden soll. Dieses Attribut kann einen der folgenden Werte annehmen:

• ein leerer String
• das Schlüsselwort hidden
• das Schlüsselwort until-found

Es gibt zwei Zustände, die mit dem hidden-Attribut verbunden sind: den versteckten Zustand und den versteckt bis gefunden Zustand.

• Ein leerer String oder das Schlüsselwort hidden versetzt das Element in den versteckten Zustand. Zusätzlich setzen ungültige Werte das Element ebenfalls in diesen Zustand.

• Das Schlüsselwort until-found versetzt das Element in den versteckt bis gefunden Zustand.

Daher setzen alle folgenden Beispiele das Element in den versteckten Zustand:

<span hidden>I'm hidden</span>
<span hidden="">I'm also hidden</span>
<span hidden="hidden">I'm hidden too!</span>

Das folgende Beispiel setzt das Element in den versteckt bis gefunden Zustand:

<span hidden="until-found">I'm hidden until found</span>

Das hidden-Attribut darf nicht verwendet werden, um Inhalte nur in einer Präsentation zu verstecken. Wenn etwas als versteckt markiert ist, ist es in allen Präsentationen verborgen, einschließlich zum Beispiel Screenreadern.

Versteckte Elemente sollten nicht von nicht versteckten Elementen verlinkt werden. Zum Beispiel wäre es falsch, das href-Attribut zu verwenden, um auf einen Abschnitt zu verlinken, der mit dem hidden-Attribut markiert ist. Wenn der Inhalt nicht anwendbar oder relevant ist, gibt es keinen Grund, darauf zu verlinken.

Es wäre jedoch zulässig, das ARIA-Attribut aria-describedby zu verwenden, um auf Beschreibungen zu verweisen, die selbst versteckt sind. Während das Verstecken der Beschreibungen impliziert, dass sie für sich genommen nicht nützlich sind, könnten sie so geschrieben sein, dass sie im spezifischen Kontext, von dem Element, das sie beschreiben, nützlich sind.

Ähnlich kann ein Canvas-Element mit dem hidden-Attribut von einer skriptgesteuerten Grafik-Engine als Off-Screen-Puffer verwendet werden, und ein Formularelement könnte auf ein verstecktes Formularelement mit seinem Formular-Attribut verweisen.

Elemente, die Nachkommen eines versteckten Elements sind, bleiben aktiv, was bedeutet, dass script-Elemente weiterhin ausgeführt werden können und Formularelemente weiterhin übermittelt werden können.

Der versteckte Zustand zeigt an, dass das Element momentan nicht relevant für die Seite ist oder dass es verwendet wird, um Inhalte für andere Teile der Seite zur Wiederverwendung zu deklarieren und nicht direkt dem Nutzer präsentiert werden sollte. Der Browser rendert keine Elemente, die sich im versteckten Zustand befinden.

Webbrowser könnten den versteckten Zustand mit display: none implementieren, in welchem Fall das Element nicht am Seitenlayout teilnimmt. Dies bedeutet auch, dass das Ändern des Wertes der CSS-Eigenschaft display eines Elements im versteckten Zustand diesen Zustand überschreiben wird. Beispielsweise werden Elemente im Stil display: block angezeigt, obwohl das hidden-Attribut vorhanden ist.

Im versteckt bis gefunden Zustand ist das Element verborgen, aber sein Inhalt wird für die "Finde auf Seite"-Funktion des Browsers oder für Fragmentnavigation zugänglich sein. Wenn diese Funktionen dazu führen, dass zu einem Element in einem versteckt bis gefunden Unterbaum gescrollt wird, wird der Browser:

• ein beforematch Ereignis auf dem versteckten Element auslösen
• das hidden-Attribut vom Element entfernen
• zum Element scrollen

Dies ermöglicht es einem Entwickler, einen Abschnitt von Inhalten zu kollabieren, ihn aber durchsuchbar und zugänglich über Fragmentnavigation zu machen.

Beachten Sie, dass Browser typischerweise versteckt bis gefunden mit content-visibility: hidden implementieren. Dies bedeutet, dass im Gegensatz zu Elementen im versteckten Zustand, Elemente im versteckt bis gefunden Zustand erzeugte Boxen haben werden, was bedeutet, dass:

• das Element am Seitenlayout teilnimmt
• Rand, Rahmen, Auffüllung und Hintergrund des Elements gerendert werden.

Außerdem muss das Element von Layout-Einschließung betroffen sein, um sichtbar gemacht zu werden. Das bedeutet, dass wenn das Element im versteckt bis gefunden Zustand einen display-Wert von none, contents oder inline hat, das Element nicht durch die Seitensuche oder Fragmentnavigation sichtbar gemacht wird.

In diesem Beispiel haben wir:

• Drei <div>-Elemente. Das erste und das dritte sind nicht versteckt, während das zweite die Attribute hidden="until-found" und id="until-found-box" hat.
• Einen Link, dessen Ziel das Fragment "until-found-box" ist.

Das versteckte bis gefundene Element hat einen gepunkteten roten Rand und einen grauen Hintergrund.

Wir haben auch ein JavaScript, das auf das beforematch-Ereignis des versteckten bis gefundenen Elements hört. Der Ereignis-Handler ändert den Textinhalt des Kastens.

HTML

<a href="#until-found-box">Go to hidden content</a>

<div>I'm not hidden</div>
<div id="until-found-box" hidden="until-found">Hidden until found</div>
<div>I'm not hidden</div>

<button id="reset">Reset</button>

CSS

div {
  height: 40px;
  width: 300px;
  border: 5px dashed black;
  margin: 1rem 0;
  padding: 1rem;
  font-size: 2rem;
}

div#until-found-box {
  color: red;
  border: 5px dotted red;
  background-color: lightgray;
}

#until-found-box {
  scroll-margin-top: 200px;
}

JavaScript

const untilFound = document.querySelector("#until-found-box");
untilFound.addEventListener(
  "beforematch",
  () => (untilFound.textContent = "I've been revealed!"),
);

document.querySelector("#reset").addEventListener("click", () => {
  document.location.hash = "";
  document.location.reload();
});

Ergebnis

Beachten Sie, dass obwohl der Inhalt des Elements versteckt ist, das Element immer noch eine erzeugte Box hat, die im Layout Platz einnimmt und mit Hintergrund und Rahmen gerendert wird.

Das Klicken auf den Button "Gehe zu verstecktem Inhalt" navigiert zum versteckten bis gefundenen Element. Das beforematch-Ereignis wird ausgelöst, der Textinhalt wird aktualisiert und der Elementinhalt wird angezeigt.

Um das Beispiel erneut auszuführen, klicken Sie auf "Zurücksetzen".

• HTMLElement.hidden
• Alle globalen Attribute
• Das aria-hidden Attribut
• Das beforematch Ereignis