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.

Diecontain-intrinsic-widthCSS Eigenschaft legt die Breite eines Elements fest, die ein Browser für das Layout verwendet, wenn das Element derGrößenbegrenzung unterliegt.

Syntax

css

/* 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>.

Die Eigenschaft wird häufig zusammen mit Elementen angewendet, die eine Größenbegrenzung auslösen können, wie z. B.contain: size undcontent-visibility. Sie kann auch mit dercontain-intrinsic-sizeKurzschreibweise 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.Diecontain-intrinsic-width-Eigenschaft ermöglicht es Autoren, einen geeigneten Wert anzugeben, der als Breite für das Layout verwendet wird.

Der Wertauto <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 mitcontent-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 diecontain-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.

html

<div>  <div></div></div>

Das untenstehende CSS setzt diecontent-visibility voncontained_element aufauto, 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 mitcontain-intrinsic-width undcontain-intrinsic-height festgelegt.

css

#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;}