hidden

Das hidden-Attribut gibt an, dass der Inhalt eines Elements dem Benutzer nicht angezeigt werden soll. Das Attribut nimmt einen der folgenden Werte an:

• das Schlüsselwort hidden
• das Schlüsselwort until-found
• einen leeren String oder keinen Wert

Ungültige hidden-Attributwerte versetzen das Element ebenfalls in den hidden-Zustand. Daher befinden sich alle folgenden Elemente im hidden-Zustand:

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

Das Schlüsselwort until-found versetzt das Element in den hidden until found-Zustand:

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

Der verborgene Zustand zeigt an, dass das Element derzeit nicht relevant für die Seite ist oder dass es verwendet wird, um Inhalte für die Wiederverwendung durch andere Teile der Seite zu deklarieren und nicht direkt dem Benutzer angezeigt werden soll. Der Browser wird Elemente im verborgenen Zustand nicht rendern.

Webbrowser können den verborgenen Zustand mit display: none implementieren, in welchem Fall das Element nicht an der Seiten-Layoutgestaltung teilnimmt. Zusätzlich wird das Ändern des Werts der CSS-Eigenschaft display auf einem verborgenen Element den verborgenen Zustand überschreiben. Beispielsweise werden Elemente, die mit display: block gestylt sind, trotz der Anwesenheit des hidden-Attributs angezeigt.

Im verborgen bis gefunden Zustand ist das Element verborgen, aber sein Inhalt wird für die "Finden auf Seite"-Funktion des Browsers oder die Fragmentnavigation zugänglich sein. Wenn diese Funktionen ein Scrollen zu einem Element in einem verborgen bis gefunden-Teilbaum verursachen, wird der Browser:

1. Ein beforematch Ereignis auf dem verborgenen Element auslösen
2. Das hidden-Attribut vom Element entfernen
3. Zum Element scrollen

Dies ermöglicht es Ihnen, einen Abschnitt von Inhalten zu kollabieren, während es den Benutzern trotzdem ermöglicht wird, ihn durch Suche oder Navigation zu finden.

Browser implementieren verborgen bis gefunden typischerweise mit content-visibility: hidden. Das bedeutet, dass, im Gegensatz zu Elementen im verborgenen Zustand, Elemente im verborgen bis gefunden Zustand Boxen generieren, und:

• sie an der Seiten-Layoutgestaltung teilnehmen
• ihre Ränder, Umrandungen, Abstände und Hintergründe gerendert werden

Außerdem muss das Element von Layout-Einschränkungen betroffen sein, um sichtbar gemacht zu werden. Wenn das Element im verborgen bis gefunden-Zustand einen display-Wert von none, contents oder inline hat, wird es durch "Finden auf Seite" oder Fragmentnavigation nicht sichtbar gemacht.

Das hidden-Attribut darf nicht verwendet werden, um Inhalte nur aus einer Darstellung zu verbergen. Wenn etwas als verborgen markiert ist, ist es aus allen Darstellungen, inklusive zum Beispiel Bildschirmlesegeräten, verborgen.

Verborgene Elemente sollten nicht von sichtbaren Elementen verlinkt werden, es sei denn, es wird hidden="until-found" verwendet. Zum Beispiel wäre es falsch, das href-Attribut zu verwenden, um zu einem Abschnitt mit dem hidden-Attribut zu verlinken. Wenn der Inhalt nicht zutreffend oder relevant ist, sollte er nicht verlinkt werden.

Es ist jedoch in Ordnung, das ARIA-Attribut aria-describedby zu verwenden, um auf verborgene Beschreibungen zu verweisen. Während das Verbergen der Beschreibungen impliziert, dass sie für sich genommen nicht nützlich sind, können sie in dieser Weise referenziert nützlichen Kontext bieten.

Ebenso könnte ein Canvas-Element mit dem hidden-Attribut von einer skriptbasierten Grafik-Engine als Off-Screen-Puffer verwendet werden, und ein Formularelement könnte auf ein verborgenes Formular-Element durch sein Formular-Attribut verweisen.

Abschließend beachten Sie, dass Elemente, die Nachkommen eines verborgenen Elements sind, weiterhin aktiv sind, was bedeutet, dass Skriptelemente weiterhin ausgeführt werden können und Formularelemente weiterhin abgesendet werden können:

<div hidden>
  <script>
    console.warn("Boo! I'm hidden *and* running!");
  </script>
</div>

In diesem Beispiel haben wir drei <div>-Elemente. Das erste und das dritte sind nicht verborgen, während das zweite ein hidden-Attribut hat. Beachten Sie, dass das verborgene Element keine generierte Box hat.

<div>I'm not hidden</div>
<div hidden>I'm hiding!</div>
<div>I'm not hidden, either</div>

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

In diesem Beispiel haben wir drei <div>-Elemente. Das erste und das dritte sind sichtbar, während das zweite die Attribute hidden="until-found" und id="until-found-box" hat. Das Element mit einer id von until-found-box hat eine gepunktete rote Umrandung und einen grauen Hintergrund.

Wir haben auch einen Link, der auf das "until-found-box"-Fragment zielt, und JavaScript, das auf das beforematch-Ereignis lauscht, das sich an diesem verborgenen Element ereignet. Der Ereignishandler ändert den Textinhalt der Box, um eine Aktion zu veranschaulichen, die erfolgen kann, wenn der verborgen bis gefunden-Zustand entfernt werden soll.

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 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

Beim Anklicken des Links "Gehe zu verborgenen Inhalten" wird zum verborgen bis gefunden-Element navigiert. Das beforematch-Ereignis wird ausgelöst, der Textinhalt wird aktualisiert und das Element wird sichtbar. Beachten Sie, dass der Inhalt des Elements verborgen ist, das Element jedoch weiterhin eine generierte Box hat, die Platz im Layout einnimmt, und Hintergrund und Umrandungen gerendert werden.

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

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