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, wenn er existiert und das Element seine Inhalte überspringt (zum Beispiel, wenn es außerhalb des Bildschirms ist); andernfalls die angegebene <length>.

Die Eigenschaft wird häufig in Kombination mit Elementen verwendet, 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 ermöglicht es einem Benutzeragenten, ein Element so zu layouten, als hätte es eine feste Größe, wodurch unnötige Neulayouts vermieden werden, indem das erneute Rendern von Kindelementen vermieden wird, um die tatsächliche Größe zu bestimmen (was die Benutzerfreundlichkeit verbessert). Standardmäßig behandelt die Größenbeschränkung Elemente, als hätten sie keine Inhalte, und kann das Layout in derselben Weise zusammenfalten, 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 werden soll.

Der auto <length> Wert erlaubt es, die Breite des Elements zu speichern, wenn das Element jemals „normal gerendert“ wird (mit seinen Kindelementen), und diesen dann anstelle der angegebenen Breite zu verwenden, wenn das Element seine Inhalte überspringt. Dies ermöglicht es, dass Elemente außerhalb des Bildschirms 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 gespeicherte Wert wird nicht verwendet, wenn die Kindelemente gerendert werden (wenn die Größenbeschränkung aktiviert ist, wird die <length> verwendet).

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

Zusätzlich zu dem folgenden 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 einer Größenbeschränkung unterliegt und ein Kindelement 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, wenn das Element versteckt ist, es einer Größenbeschränkung unterliegt. Die Breite und Höhe, die verwendet werden, wenn es der 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;
}

• 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