contain-intrinsic-width

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 gespeicherter Wert der "normal gerenderten" Elementbreite, falls vorhanden und das Element seine Inhalte überspringt (zum Beispiel, wenn es außerhalb des Bildschirms ist); ansonsten die angegebene <length>.

Die Eigenschaft wird häufig zusammen mit Elementen angewendet, die eine Größenbeschränkung auslösen können, wie contain: size und content-visibility, und kann auch mit der contain-intrinsic-size Kurzform-Eigenschaft gesetzt werden.

Größenbeschränkung erlaubt es einem User Agent, ein Element so zu layouten, als hätte es eine feste Größe, wodurch unnötige Reflows vermieden werden, indem die Kind-Elemente nicht neu gerendert werden müssen, um die tatsächliche Größe zu bestimmen (wodurch die Benutzererfahrung verbessert wird). Standardmäßig behandelt die Größenbeschränkung Elemente so, als hätten sie keine Inhalte, und kann das Layout auf die gleiche Weise kollabieren lassen, als ob die Inhalte keine Breite oder Höhe hätten. Die contain-intrinsic-width Eigenschaft erlaubt Autoren, einen geeigneten Wert festzulegen, der als Breite für das Layout verwendet wird.

Der Wert auto <length> erlaubt 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 Offscreen-Elementen mit content-visibility: auto, von der Größenbeschränkung zu profitieren, ohne dass Entwickler so genau in ihren Schätzungen der Elementgröße sein müssen. Der gespeicherte Wert wird nicht verwendet, wenn die Kind-Elemente gerendert werden (wenn die Größenbeschränkung aktiviert ist, wird die <length> verwendet).

contain-intrinsic-width = 
  auto? [ none | <length> ]  

Neben dem unten stehenden Beispiel enthält die Seite contain-intrinsic-size ein Live-Beispiel, das die Wirkung der Änderung der intrinsischen Breite und Höhe demonstriert.

Das folgende HTML definiert ein Element "contained_element", das der Größenbeschränkung unterliegt und ein Kind-Element enthält.

<div id="contained_element">
  <div class="child_element"></div>
</div>

Das folgende CSS setzt die content-visibility von contained_element auf auto, sodass es, wenn das Element versteckt ist, größenbeschränkt wird. Die Breite und Höhe, die verwendet werden, wenn es 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;
}

• content-visibility: the new CSS property that boosts your rendering performance (web.dev)
• contain-intrinsic-size
• contain-intrinsic-height
• contain-intrinsic-block-size
• contain-intrinsic-inline-size