<display-box>

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

Diese Schlüsselwörter definieren, ob ein Element überhaupt Anzeige-Boxen erzeugt.

Syntax

Gültige <display-box> Werte:

contents

Diese Elemente erzeugen selbst keine spezifische Box. Sie werden durch ihre Pseudo-Box und deren Kinder-Boxen ersetzt. Bitte beachten Sie, dass die CSS Display Level 3 Spezifikation beschreibt, wie der contents Wert "ungewöhnliche Elemente" beeinflussen sollte — Elemente, die nicht rein durch CSS-Box-Konzepte gerendert werden, wie ersetzte Elemente. Weitere Details finden Sie in Anhang B: Effekte von display: contents auf ungewöhnliche Elemente.

Aufgrund eines Bugs in Browsern wird dieses Element derzeit aus dem Zugänglichkeitsbaum entfernt — Bildschirmleseprogramme berücksichtigen nicht, was sich darin befindet. Weitere Einzelheiten finden Sie im Abschnitt Barrierefreiheit unten.

none

Schaltet die Anzeige eines Elements aus, sodass es keinen Einfluss auf das Layout hat (das Dokument wird gerendert, als ob das Element nicht existieren würde). Alle Nachfahren-Elemente werden ebenfalls nicht mehr angezeigt. Um ein Element den Platz einnehmen zu lassen, den es normalerweise einnehmen würde, ohne tatsächlich etwas zu rendern, verwenden Sie stattdessen die Eigenschaft visibility.

Barrierefreiheit

Aktuelle Implementierungen in den meisten Browsern entfernen aus dem Zugänglichkeitsbaum jedes Element mit einem display Wert von contents. Dies führt dazu, dass das Element — und in einigen Browserversionen auch seine Nachfahren-Elemente — von Bildschirmlesetechnologien nicht mehr angesagt werden. Dies ist ein inkorrektes Verhalten gemäß der CSSWG-Spezifikation.

Formale Syntax

<display-box> = 
  contents  |
  none

Beispiele

Im ersten Beispiel wird der Absatz mit einer Klasse von secret auf display: none gesetzt; die Box und jeglicher Inhalt wird nun nicht mehr gerendert.

display: none

HTML

html
<p>Visible text</p>
<p class="secret">Invisible text</p>

CSS

css
p.secret {
  display: none;
}

Ergebnis

display: contents

In diesem Beispiel hat der äußere <div> einen 2-Pixel breiten roten Rand und eine Breite von 300px. Da jedoch auch display: contents angegeben ist, wird dieser <div> nicht gerendert, der Rahmen und die Breite gelten nicht mehr, und das Kind-Element wird angezeigt, als ob das Elternelement nie existiert hätte.

HTML

html
<div class="outer">
  <div>Inner div.</div>
</div>

CSS

css
.outer {
  border: 2px solid red;
  width: 300px;
  display: contents;
}

.outer > div {
  border: 1px solid green;
}

Ergebnis

Spezifikationen

Specification
CSS Display Module Level 3
# valdef-display-contents

Browser-Kompatibilität

Siehe auch