HTML hidden globales Attribut

Probieren Sie es aus

<p>
  This content should be read right now, as it is important. I am so glad you
  are able to find it!
</p>

<p hidden>
  This content is not relevant to this page right now, so should not be seen.
  Nothing to see here. Nada.
</p>

p {
  background: #ffe8d4;
  border: 1px solid #f69d3c;
  padding: 5px;
  border-radius: 5px;
}

Beschreibung

Das hidden-Attribut gibt an, dass der Inhalt eines Elements dem Benutzer nicht präsentiert 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 versetzen das Element ebenfalls in den hidden-Status. Daher befinden sich alle folgenden Elemente im hidden-Status:

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

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

Der hidden-Status

Der hidden-Status zeigt an, dass das Element derzeit nicht relevant für die Seite ist oder dass es verwendet wird, um Inhalt zu deklarieren, der von anderen Teilen der Seite wiederverwendet werden soll und nicht direkt dem Benutzer präsentiert werden sollte. Der Browser wird Elemente, die sich im hidden-Status befinden, nicht rendern.

Webbrowser können den hidden-Status mit display: none implementieren, in welchem Fall das Element nicht am Seitenlayout teilnimmt. Zusätzlich wird eine Änderung des Wertes der CSS display Eigenschaft eines versteckten Elements den hidden-Status überschreiben. Beispielsweise werden Elemente, die mit display: block gestylt sind, trotz des hidden-Attributs angezeigt.

Der hidden until found-Status

Im hidden until found-Status ist das Element verborgen, aber sein Inhalt wird für die "Seite durchsuchen"-Funktion des Browsers oder für Fragmentnavigation zugänglich sein. Wenn diese Features zu einem Element in einem hidden until found-Teilbaum scrollen, wird der Browser:

1. Ein beforematch-Ereignis am versteckten Element auslösen
2. Das hidden-Attribut vom Element entfernen
3. Zum Element scrollen

Dies ermöglicht es Ihnen, einen Abschnitt des Inhalts zu kollabieren, 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-Status, Elemente im hidden until-found-Status Boxen generieren und:

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

Außerdem muss das Element von Layout-Containment betroffen sein, um sichtbar gemacht zu werden. Wenn das Element im hidden until found-Status einen display-Wert von none, contents oder inline hat, wird das Element nicht von "Seite durchsuchen" oder Fragmentnavigation sichtbar gemacht.

Anwendungsnotizen

Das hidden-Attribut sollte nicht verwendet werden, um Inhalte nur aus einer Präsentation auszublenden. Wenn etwas als versteckt markiert ist, ist es von allen Präsentationen versteckt, einschließlich zum Beispiel Bildschirmlesegeräten.

Versteckte Elemente sollten nicht von sichtbaren Elementen verlinkt werden, es sei denn, es wird hidden="until-found" verwendet. Zum Beispiel wäre es inkorrekt, das href-Attribut zu verwenden, um auf einen Abschnitt mit dem hidden-Attribut zu verlinken. Wenn der Inhalt nicht anwendbar 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 Verstecken der Beschreibungen impliziert, dass sie alleine nicht nützlich sind, können sie auf diese Weise hilfreichen Kontext bieten.

Ebenso könnte 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 Form-Attribut verweisen.

Zuletzt sei erwähnt, dass Elemente, die Nachfahren eines versteckten Elements sind, weiterhin aktiv sind, was bedeutet, dass <script>-Elemente weiterhin ausgeführt werden und Formularelemente weiterhin Daten absenden können:

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

Beispiele

Verwendung des hidden-Attributs

In diesem Beispiel haben wir drei <div> Elemente. Das erste und das dritte sind nicht versteckt, während das zweite ein hidden-Attribut besitzt. 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;
}

Verwendung des until-found Wertes

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" besitzt. Das Element mit der until-found-box-ID hat einen gepunkteten roten Rahmen und einen grauen Hintergrund.

Wir haben auch einen Link, der auf das Fragment "until-found-box" zielt, und JavaScript, das auf das beforematch-Ereignis hört, das bei diesem versteckten Element ausgelöst wird. Der Ereignis-Handler ändert den Textinhalt der Box, um eine Aktion zu veranschaulichen, die stattfinden kann, wenn der hidden until found-Status 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 not hidden, either</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

Das Anklicken des Links "Zum versteckten Inhalt gehen" navigiert zum 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 mit Hintergrund und Rahmen gerendert wird.

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

Spezifikationen

Browser-Kompatibilität

Siehe auch

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