contain-intrinsic-block-size

Syntaxe

/* Valeurs avec un mot-clé */
contain-intrinsic-block-size: none;

/* Valeurs de type <length> */
contain-intrinsic-block-size: 1000px;
contain-intrinsic-block-size: 10rem;

/* Valeur auto et <length> */
contain-intrinsic-block-size: auto 300px;

/* Valeurs globales */
contain-intrinsic-block-size: inherit;
contain-intrinsic-block-size: initial;
contain-intrinsic-block-size: revert;
contain-intrinsic-block-size: revert-layer;
contain-intrinsic-block-size: unset;

Valeurs

Les valeurs suivantes peuvent être définies pour la taille de bloc intrinsèque d'un élément :

none

L'élément n'a pas de taille de bloc intrinsèque.

<length>

L'élément a la taille de bloc définie, exprimée en utilisant le type de donnée <length>.

auto <length>

Lorsque l'élément est en compartimentation de taille et qu'il omet son contenu (par exemple, lorsqu'il est hors écran et que content-visibility: auto est défini), la taille de bloc est mémorisée à partir de la taille réelle de l'élément lors du dernier rendu de ses éléments enfants. Si l'élément n'a jamais rendu ses éléments enfants et n'a donc pas de valeur mémorisée pour la taille de l'élément normalement rendu, ou s'il n'omettait pas son contenu, la taille de bloc est la <length> définie.

Description

La propriété est couramment appliquée avec des éléments pouvant activer la compartimentation de taille, tels que contain: size et content-visibility.

La compartimentation de taille permet à un agent utilisateur de disposer un élément comme s'il avait une taille fixe. Cela évite des recalculs de mise en page inutiles en évitant le rerendu des éléments enfants pour déterminer la taille réelle (améliorant ainsi l'expérience utilisateur). Par défaut, la compartimentation de taille considère les éléments comme s'ils n'avaient pas de contenu et peut contracter la mise en page de la même manière que si les contenus n'avaient ni largeur ni hauteur. La propriété contain-intrinsic-block-size permet aux auteur·ice·s de définir une valeur appropriée à utiliser comme taille de bloc pour la mise en page.

La valeur auto <length> permet de mémoriser la taille de bloc d'un élément si celui‑ci a déjà été « rendu normalement » (avec ses éléments enfants), et d'utiliser cette valeur mémorisée au lieu de la valeur définie lorsque l'élément n'a pas de contenu. Cela permet aux éléments hors écran avec content-visibility: auto de bénéficier de la compartimentation de taille sans que les développeur·euse·s aient à estimer précisément la taille de l'élément. La valeur mémorisée n'est pas utilisée si les éléments enfants sont en cours de rendu ; si la compartimentation de taille est activée, la valeur <length> définie est utilisée.

Definition formelle

Syntaxe formelle

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

Exemples

Définir la taille de bloc intrinsèque

Le HTML ci‑dessous définit un élément « contained_element » qui sera soumis à une contrainte de taille, et qui contient un élément enfant.

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

Le CSS ci‑dessous règle content-visibility de contained_element sur auto, donc si l'élément est masqué il sera contraint en taille. La taille de bloc intrinsèque et la taille en ligne utilisées lorsque l'élément est contraint sont définies simultanément à l'aide de contain-intrinsic-block-size et contain-intrinsic-inline-size, respectivement.

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

Spécifications

Compatibilité des navigateurs

Voir aussi

• content-visibility : la nouvelle propriété CSS qui améliore vos performances de rendu (web.dev)
• La propriété contain-intrinsic-inline-size
• La propriété contain-intrinsic-size
• La propriété contain-intrinsic-width
• La propriété contain-intrinsic-height