contain-intrinsic-inline-size

Die folgenden Werte können für die intrinsische Inline-Größe eines Elements angegeben werden:

none

Das Element hat keine intrinsische Inline-Größe.

<length>

Das Element hat die angegebene Inline-Größe (<length>).

auto <length>

Wenn das Element einer Größenbeschränkung unterliegt und seine Inhalte übersprungen werden (zum Beispiel, wenn es außerhalb des Bildschirms ist und content-visibility: auto eingestellt ist), wird die Inline-Größe aus der tatsächlichen Größe des Elements gespeichert, als es zuletzt in der Lage war, seine Kindelemente darzustellen. Wenn das Element seine Kindelemente nie dargestellt hat und daher keinen gespeicherten Wert für die normalerweise gerenderte Elementgröße hat, oder wenn es seine Inhalte nicht überspringt, ist die Inline-Größe das angegebene <length>.

Die Eigenschaft wird häufig zusammen mit Elementen angewendet, die eine Größenbeschränkung auslösen können, wie zum Beispiel contain: size und content-visibility.

Größenbeschränkung erlaubt es einem Benutzeragenten, ein Element so zu layouten, als ob es eine feste Größe hätte, um unnötige Neuanordnungen zu verhindern, indem das Neurendern 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 ob sie keine Inhalte hätten, und kann das Layout auf die gleiche Weise kollabieren, als hätten die Inhalte keine Breite oder Höhe. Die Eigenschaft contain-intrinsic-inline-size erlaubt es Autoren, einen geeigneten Wert festzulegen, der als Inline-Größe für das Layout verwendet werden soll.

Der Wert auto <length> erlaubt es, die Inline-Größe des Elements zu speichern, wenn das Element jemals "normal gerendert" wird (mit seinen Kindelementen), und dann anstelle des angegebenen Wertes 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 können, 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 das <length> verwendet).

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

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 das Element, wenn es versteckt ist, einer Größenbeschränkung unterliegt. Die intrinsische Blockgröße und Inline-Größe, die verwendet werden, wenn es einer Größenbeschränkung unterliegt, werden gleichzeitig mit contain-intrinsic-block-size und contain-intrinsic-inline-size gesetzt.

#contained_element {
  border: 2px solid green;
  inline-size: 151px;
  content-visibility: auto;
  contain-intrinsic-inline-size: 152px;
  contain-intrinsic-block-size: 52px;
}
.child_element {
  border: 1px solid red;
  background: blue;
  block-size: 50px;
  inline-size: 150px;
}

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