contain-intrinsic-width CSS property
Baseline
Weitgehend verfügbar
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit September 2023 browserübergreifend verfügbar.
Die contain-intrinsic-width CSS-Eigenschaft legt die Breite eines Elements fest, die ein Browser für das Layout verwendet, wenn das Element einer Größenbeschränkung unterliegt.
Syntax
/* Keyword values */
contain-intrinsic-width: none;
/* <length> values */
contain-intrinsic-width: 1000px;
contain-intrinsic-width: 10rem;
/* auto <length> */
contain-intrinsic-width: auto 300px;
/* Global values */
contain-intrinsic-width: inherit;
contain-intrinsic-width: initial;
contain-intrinsic-width: revert;
contain-intrinsic-width: revert-layer;
contain-intrinsic-width: unset;
Werte
Die folgenden Werte können für ein Element angegeben werden.
none-
Das Element hat keine intrinsische Breite.
<length>-
Das Element hat die angegebene Breite (
<length>). auto <length>-
Ein gemerkter Wert der "normal gerenderten" Elementbreite, falls vorhanden, und das Element überspringt seine Inhalte (zum Beispiel, wenn es außerhalb des sichtbaren Bereichs ist); ansonsten die angegebene
<length>.
Beschreibung
Diese Eigenschaft wird häufig zusammen mit Elementen angewendet, die eine Größenbeschränkung auslösen können, wie z. B. contain: size und content-visibility, und kann auch mit der contain-intrinsic-size Kurzschreibweise gesetzt werden.
Größenbeschränkung ermöglicht es einem User-Agent, ein Element so zu layouten, als hätte es eine feste Größe, wodurch unnötige Umbrüche vermieden werden, indem das Neuzeichnen von Kindelementen zur Bestimmung der tatsächlichen Größe vermieden wird (was die Benutzererfahrung verbessert).
Standardmäßig behandelt die Größenbeschränkung Elemente so, als hätten sie keine Inhalte, und kann das Layout so zusammenfallen lassen, als hätten die Inhalte keine Breite oder Höhe.
Die contain-intrinsic-width-Eigenschaft ermöglicht es Autoren, einen geeigneten Wert festzulegen, der als Breite für das Layout verwendet wird.
Der auto <length>-Wert erlaubt es, die Breite des Elements zu speichern, wenn das Element jemals "normal gerendert" wird (mit seinen Kindelementen), und dann anstelle der angegebenen Breite zu verwenden, wenn das Element seine Inhalte überspringt.
Dies ermöglicht es, dass Elemente außerhalb des sichtbaren Bereichs mit content-visibility: auto von der Größenbeschränkung profitieren, ohne dass Entwickler so präzise in ihren Schätzungen der Elementgröße sein müssen.
Der gemerkte Wert wird nicht verwendet, wenn die Kindelemente gerendert werden (wenn die Größenbeschränkung aktiviert ist, wird die <length> verwendet).
Formale Definition
| Anfangswert | none |
|---|---|
| Anwendbar auf | elements for which size containment can apply |
| Vererbt | Nein |
| Berechneter Wert | as specified, with <length>s values computed |
| Animationstyp | by computed value type |
Formale Syntax
contain-intrinsic-width =
auto? [ none | <length [0,∞]> ]
Beispiele
Zusätzlich zu dem untenstehenden Beispiel enthält die Seite contain-intrinsic-size ein Live-Beispiel, das den Effekt der Änderung von intrinsischer Breite und Höhe demonstriert.
Setzen der intrinsischen Breite
Das untenstehende HTML definiert ein Element "contained_element", das einer Größenbeschränkung unterliegt und ein Kindelement enthält.
<div id="contained_element">
<div class="child_element"></div>
</div>
Das untenstehende CSS setzt die content-visibility von contained_element auf auto, sodass, wenn das Element verborgen ist, es einer Größenbeschränkung unterliegt.
Die Breite und Höhe, die verwendet werden, wenn es einer Größenbeschränkung unterliegt, werden gleichzeitig mit contain-intrinsic-width und contain-intrinsic-height festgelegt.
#contained_element {
border: 2px solid green;
width: 151px;
content-visibility: auto;
contain-intrinsic-width: 152px;
contain-intrinsic-height: 52px;
}
.child_element {
border: 1px solid red;
background: blue;
height: 50px;
width: 150px;
}
Spezifikationen
| Spezifikation |
|---|
| CSS Box Sizing Module Level 4 # propdef-contain-intrinsic-width |