contain-intrinsic-width
Baseline
2023
Newly available
Since September 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
Die contain-intrinsic-width CSS Eigenschaft legt die Breite eines Elements fest, die ein Browser für das Layout verwendet, wenn das Element der Größenbegrenzung 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 übergeht seine Inhalte (beispielsweise wenn es außerhalb des Bildschirms ist); andernfalls die angegebene
<length>.
Beschreibung
Die Eigenschaft wird häufig zusammen mit Elementen angewendet, die eine Größenbegrenzung auslösen können, wie z. B. contain: size und content-visibility. Sie kann auch mit der contain-intrinsic-size Kurzschreibweise festgelegt werden.
Größenbegrenzung ermöglicht es einem Benutzeragenten, ein Element so zu layouten, als hätte es eine feste Größe, um unnötige Reflows zu verhindern, indem das erneute Rendern von Kind-Elementen zur Bestimmung der tatsächlichen Größe vermieden wird (was die Benutzererfahrung verbessert).
Standardmäßig behandelt die Größenbegrenzung Elemente so, als hätten sie keine Inhalte, und das Layout kann in derselben Weise zusammenbrechen, als hätten die Inhalte keine Breite oder Höhe.
Die contain-intrinsic-width-Eigenschaft ermöglicht es Autoren, einen geeigneten Wert anzugeben, der als Breite für das Layout verwendet wird.
Der Wert auto <length> ermöglicht es, die Breite des Elements zu speichern, wenn das Element jemals "normal gerendert" wird (mit seinen Kind-Elementen), und dann anstelle der angegebenen Breite verwendet zu werden, wenn das Element seine Inhalte überspringt.
Dies erlaubt es, außerhalb des Bildschirms befindliche Elemente mit content-visibility: auto von der Größenbegrenzung profitieren zu lassen, ohne dass Entwickler die Schätzungen der Elementgröße so genau festlegen müssen.
Der gemerkte Wert wird nicht verwendet, wenn die Kind-Elemente gerendert werden (wenn die Größenbegrenzung 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 | from-element ]? [ none | <length [0,∞]> ]
Beispiele
Zusätzlich zum untenstehenden Beispiel enthält die contain-intrinsic-size Seite ein Live-Beispiel, das die Wirkung der Änderung der intrinsischen Breite und Höhe demonstriert.
Festlegung der intrinsischen Breite
Das untenstehende HTML definiert ein Element "contained_element", das einer Größenbeschränkung unterliegt und ein Kind-Element 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 das Element bei Ausblendung einer Größeneinschränkung unterliegt.
Die Breite und Höhe, die verwendet werden, wenn sie größenbeschränkt ist, 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
| Specification |
|---|
| CSS Box Sizing Module Level 4 # propdef-contain-intrinsic-width |