<display-box> CSS-Typ
Baseline
Weitgehend verfügbar
*
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Januar 2020 browserübergreifend verfügbar.
* Einige Teile dieser Funktion werden möglicherweise unterschiedlich gut unterstützt.
Diese Schlüsselwörter definieren, ob ein Element überhaupt Display-Boxen erzeugt.
Syntax
Gültige <display-box> Werte:
contents-
Diese Elemente erzeugen selbst keine spezifische Box. Sie werden durch ihre Pseudo-Box und ihre Kinder-Boxen ersetzt. Bitte beachten Sie, dass die CSS Display Level 3 Spezifikation definiert, wie der Wert
contentssich auf "ungewöhnliche Elemente" auswirken sollte — Elemente, die nicht ausschließlich durch CSS-Box-Konzepte wie ersetzbare Elemente gerendert werden. Siehe Anhang B: Auswirkungen von display: contents auf ungewöhnliche Elemente für weitere Details.Aufgrund eines Fehlers in den Browsern wird dies derzeit das Element aus dem Accessibility-Baum entfernen — Bildschirmlesegeräte werden den Inhalt nicht berücksichtigen. Weitere Details finden Sie im Abschnitt Accessibility unten.
none-
Schaltet die Anzeige eines Elements aus, sodass es keine Auswirkungen auf das Layout hat (das Dokument wird gerendert, als ob das Element nicht existieren würde). Alle Nachkommenelemente haben ebenfalls ihre Anzeige ausgeschaltet. Um ein Element den Raum einnehmen zu lassen, den es normalerweise einnehmen würde, ohne jedoch tatsächlich etwas zu rendern, verwenden Sie stattdessen die
visibilityEigenschaft.
Barrierefreiheit
Aktuelle Implementierungen in den meisten Browsern werden jedes Element mit einem display-Wert von contents aus dem Accessibility-Baum entfernen. Dies führt dazu, dass das Element — und in einigen Browserversionen seine Nachkommenelemente — nicht mehr von Bildschirmlesetechnologie angekündigt werden. Dies ist ein fehlerhaftes 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 jetzt 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. Es hat jedoch auch display: contents angegeben, daher wird dieses <div> nicht gerendert, der Rand und die Breite gelten nicht mehr, und das Kindelement wird angezeigt, als ob das Elternelement 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
| Spezifikation |
|---|
| CSS Display Module Level 3 # valdef-display-contents |