Dashiddenglobale Attribut ist einenumeriertes Attribut, das angibt, dass der Browser den Inhalt des Elements nicht rendern sollte. Zum Beispiel kann es verwendet werden, um Seitenelemente auszublenden, die erst genutzt werden können, wenn der Anmeldeprozess abgeschlossen ist.

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

Dashidden-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üsselworthidden
• das Schlüsselwortuntil-found
• ein leerer String oder kein Wert

Ungültigehidden-Attributwerte versetzen das Element ebenfalls in denhidden-Status. Daher befinden sich alle folgenden Elemente imhidden-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üsselwortuntil-found versetzt das Element in denhidden until found-Status:

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

Der hidden-Status

Derhidden-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 imhidden-Status befinden, nicht rendern.

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

Der hidden until found-Status

Imhidden 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 einemhidden until found-Teilbaum scrollen, wird der Browser:

1. Einbeforematch-Ereignis am versteckten Element auslösen
2. Dashidden-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 implementierenhidden until found typischerweise mitcontent-visibility: hidden.Das bedeutet, dass im Gegensatz zu Elementen imhidden-Status, Elemente imhidden 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 vonLayout-Containment betroffen sein, um sichtbar gemacht zu werden.Wenn das Element imhidden until found-Status einendisplay-Wert vonnone,contents oderinline hat, wird das Element nicht von "Seite durchsuchen" oder Fragmentnavigation sichtbar gemacht.

Anwendungsnotizen

Dashidden-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 wirdhidden="until-found" verwendet.Zum Beispiel wäre es inkorrekt, dashref-Attribut zu verwenden, um auf einen Abschnitt mit demhidden-Attribut zu verlinken.Wenn der Inhalt nicht anwendbar oder relevant ist, sollte er nicht verlinkt werden.

Es ist jedoch in Ordnung, das ARIA-Attributaria-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 demhidden-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 einhidden-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 Attributehidden="until-found" undid="until-found-box" besitzt.Das Element mit deruntil-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 dasbeforematch-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 derhidden until found-Status entfernt werden soll.

HTML

<a href="#until-found-box">Go to hidden content</a><div>I'm not hidden</div><div hidden="until-found">Hidden until found</div><div>I'm not hidden, either</div>

<button>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 zumhidden until found-Element. Dasbeforematch-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
• Alleglobalen Attribute
• Dasaria-hidden Attribut
• Dasbeforematch Ereignis