HTML globales Attribut `hidden`

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

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

Ungültige hidden-Attributwerte setzen 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 setzt das Element in den hidden until found-Zustand:

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

Der hidden-Zustand zeigt an, dass das Element derzeit nicht relevant für die Seite ist oder dass es zur Deklaration von Inhalten für die Wiederverwendung in anderen Teilen der Seite verwendet wird und dem Benutzer nicht direkt präsentiert werden soll. Der Browser rendert keine Elemente, die sich im hidden-Zustand befinden.

Webbrowser können den hidden-Zustand mit display: none implementieren, in welchem Fall das Element nicht am Seitenlayout teilnimmt. Zusätzlich wird das Ändern des Werts der CSS-Eigenschaft display auf einem verborgenen Element den hidden-Zustand außer Kraft setzen. Zum Beispiel werden Elemente, die mit display: block gestylt sind, trotz des Vorhandenseins des hidden-Attributs angezeigt.

Im hidden until found-Zustand ist das Element verborgen, aber sein Inhalt ist für die "Im-Seiten-Suche"-Funktion des Browsers oder für die Fragment-Navigation zugänglich. Wenn diese Funktionen zu einem Element in einem hidden until found-Teilbaum scrollen, 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 eines Inhalts zu komprimieren, während Benutzer ihn dennoch durch Suche oder Navigation finden können.

Browser implementieren hidden until found typischerweise mit content-visibility: hidden. Das bedeutet, dass im Gegensatz zu Elementen im hidden-Zustand Elemente im hidden until-found-Zustand Boxen generieren und:

• am Seitenlayout teilnehmen
• ihre Ränder, Rahmen, Polsterungen und Hintergründe gerendert werden

Zusätzlich muss das Element von Layout-Einschließung betroffen sein, um enthüllt zu werden. Wenn das Element im hidden until found-Zustand einen display-Wert von none, contents oder inline hat, wird es durch "Im-Seiten-Suche" oder Fragment-Navigation nicht enthüllt.

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

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 auf einen 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 versteckte Beschreibungen zu verweisen. Auch wenn das Verbergen der Beschreibungen impliziert, dass sie alleine nicht nützlich sind, können sie in dieser Weise nützlichen Kontext bieten.

Ebenso könnte ein canvas-Element mit dem hidden-Attribut von einer geskripteten Grafik-Engine als Off-Screen-Puffer verwendet werden, und ein Formularelement könnte auf ein verborgenes Formularelement unter Verwendung seines form-Attributs verweisen.

Schließlich beachten Sie, dass Elemente, die Nachfahren eines verborgenen Elements sind, weiterhin aktiv bleiben, was bedeutet, dass Skriptelemente weiterhin ausgeführt und Formularelemente weiterhin gesendet 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 versteckte 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 der ID until-found-box hat einen gepunkteten roten Rahmen und einen grauen Hintergrund.

Wir haben auch einen Link, der auf das Fragment "until-found-box" abzielt, und JavaScript, das auf das beforematch-Ereignis hört, das bei diesem verborgenen Element ausgelöst wird. Der Ereignishandler ändert den Textinhalt der Box, um eine Aktion zu veranschaulichen, die auftreten kann, wenn der hidden until found-Zustand entfernt wird.

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

Wenn Sie auf den Link "Gehe zu verborgenen Inhalten" klicken, navigieren Sie zu dem hidden until found-Element. Das beforematch-Ereignis wird ausgelöst, der Textinhalt wird aktualisiert, und das Element wird sichtbar. Beachten Sie, dass, obwohl der Inhalt des Elements verborgen ist, das Element dennoch eine generierte Box hat, die im Layout Platz einnimmt und deren Hintergrund und Rahmen 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