<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 Januar 2020.
* Some parts of this feature may have varying levels of support.
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 Pseudobox und deren Kindboxen ersetzt. Beachten Sie bitte, dass die CSS Display Level 3-Spezifikation definiert, wie der Wert
contents"ungewöhnliche Elemente" beeinflussen sollte — Elemente, die nicht rein durch CSS-Boxkonzepte gerendert werden, wie ersetzte Elemente. Siehe Anhang B: Auswirkungen von display: contents auf ungewöhnliche Elemente für weitere Details.Aufgrund eines Fehlers in Browsern wird das Element derzeit aus dem Barrierefreiheitsbaum entfernt — Screenreader werden den Inhalt nicht erkennen. Siehe den Abschnitt Barrierefreiheit unten für weitere Details.
none-
Schaltet die Anzeige eines Elements aus, sodass es keinen Einfluss auf das Layout hat (das Dokument wird gerendert, als ob das Element nicht existiert). Alle Nachfahren-Elemente werden ebenfalls nicht 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
visibility-Eigenschaft.
Accessibility
Derzeitige Implementierungen in den meisten Browsern werden aus dem Barrierefreiheitsbaum jedes Element mit einem display-Wert von contents entfernen. Dies führt dazu, dass das Element — und in einigen Browserversionen auch seine Nachfahr-Elemente — nicht mehr von Screenreader-Technologie angekündigt werden. Dies ist ein inkorrektes Verhalten gemäß der CSSWG-Spezifikation.
Formale Syntax
<display-box> =
contents |
none
Beispiele
Im ersten Beispiel wird der Absatz mit der Klasse secret auf display: none gesetzt; die Box und jeder Inhalt wird nun nicht gerendert.
display: none
HTML
<p>Visible text</p>
<p class="secret">Invisible text</p>
CSS
p.secret {
display: none;
}
Ergebnis
display: contents
In diesem Beispiel hat das äußere <div> einen 2-Pixel roten Rand und eine Breite von 300px. Da es jedoch auch display: contents angegeben hat, wird dieses <div> nicht gerendert, der Rand und die Breite gelten nicht mehr, und das Kindelement wird angezeigt, als ob das übergeordnete Element nie existiert hätte.
HTML
<div class="outer">
<div>Inner div.</div>
</div>
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
Loading…