hidden

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

• einen leeren 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 versetzen das Element in den versteckten Zustand. Zusätzlich setzen ungültige Werte das Element in den versteckten Zustand.

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

Daher setzen alle folgenden 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 setzt das Element in den versteckt bis gefunden Zustand:

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

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

Versteckte Elemente sollten nicht von nicht-versteckten Elementen verlinkt werden. Zum Beispiel wäre es falsch, das href-Attribut zu verwenden, um zu einem 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 in Ordnung, 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 alleine nicht nützlich sind, könnten sie so geschrieben sein, dass sie im spezifischen Kontext des Verweises von dem Element, das sie beschreiben, nützlich sind.

Ähnlich könnte ein Canvas-Element mit dem hidden-Attribut von einem geskripteten Grafik-Engine als Off-Screen-Puffer verwendet werden, und ein Formularelement könnte auf ein verstecktes Formularfeld mit seinem Form-Attribut verweisen.

Elemente, die Nachkommen eines versteckten Elements sind, bleiben aktiv, was bedeutet, dass Skriptelemente weiterhin ausgeführt und Formularelemente weiterhin gesendet 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 zu deklarieren, die von anderen Teilen der Seite wiederverwendet werden und nicht direkt dem Benutzer präsentiert werden sollten. Der Browser wird Elemente, die sich im versteckten Zustand befinden, nicht rendern.

Webbrowser können den versteckten Zustand mit display: none implementieren, in welchem Fall das Element nicht am Seitendesign teilnimmt. Dies bedeutet auch, dass die Änderung des Wertes der CSS-Eigenschaft display bei einem Element im versteckten Zustand den Zustand überschreiben wird. Zum Beispiel werden Elemente, die mit display: block gestylt sind, trotz der Anwesenheit des hidden-Attributs angezeigt.

Im versteckt bis gefunden Zustand ist das Element versteckt, aber sein Inhalt wird für die Suchfunktion des Browsers "find in page" oder für die Fragment-Navigation zugänglich sein. Wenn diese Funktionen dazu führen, dass zu einem Element in einem versteckt bis gefunden Teilbaum gescrollt wird, wird der Browser:

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

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

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

• das Element am Seitendesign teilnimmt
• Rand, Rahmen, Polsterung und Hintergrund des Elements gerendert werden.

Des Weiteren muss das Element von der layout containment betroffen sein, um angezeigt 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 "find in page" oder Fragment-Navigation 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 versteckt bis gefundene Element hat einen gepunkteten roten Rahmen und einen grauen Hintergrund.

Es gibt auch ein JavaScript, das bei Eintreten des beforematch-Ereignisses auf dem versteckt bis gefundenen Element lauscht. Der Ereignishandler ändert den Textinhalt der Box.

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 generierte Box hat, die im Layout Platz einnimmt und mit Hintergrund und Rahmen gerendert wird.

Durch Klicken auf die Schaltfläche "Go to hidden content" wird zu dem versteckt bis gefundenen Element navigiert. Das beforematch-Ereignis wird ausgelöst, der Textinhalt wird aktualisiert, und der Elementinhalt wird angezeigt.

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

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