Les propriétés CSS contain-intrinsic...

Syntaxe de contain-intrinsic-size (schéma).

Description des termes utilisés sur le schéma :

• length est une valeur numérique positive ou nulle, suivie d'une des unités de dimension.

Description des propriétés contain-intrinsic....

Toutes ces propriétés, dont le nom commence par contain-intrinsic, agissent dans le cas d'un élément confiné (Contained element), c'est à dire un élément dont la propriété contain a la valeur size ou strict.

La technique du confinement permet de simplifier les calculs à réaliser pour restituer une page complexe dont certaines parties sont susceptibles de changer dynamiquement. Reportez-vous à la description de la propriété contain pour une présentation de la technique du confinement.

Les propriétés contain-intrinsic... définissent les dimensions d'un élément confiné indépendamment de son contenu.

• contain-intrinsic-width : largeur de l'élément, quelque soit le mode d'écriture.
• contain-intrinsic-height : hauteur de l'élément, quelque soit le mode d'écriture.
• contain-intrinsic-block-size : dimension de l'élément dans la direction des blocs. Pour le mode d'écriture des langues latines, ce sera la hauteur.
• contain-intrinsic-inline-size : dimension de l'élément dans la direction des lignes. Pour le mode d'écriture des langues latines, ce sera la largeur.
• contain-intrinsic-size : propriété résumée qui permet de définir en une seule écriture les dimensions de l'élément dans la direction des blocs et dans la direction des lignes.

L'intérêt des propriétés contain-intrinsic... apparaît surtout sur des éléments inclus dans un flex-box ou dans une grille. En effet, la grille ou le flex-box peuvent forcer une dimension et donc ignorer les valeurs de height et width.

Notez que les propriétés contain-intrinsic... définissent une dimension réservée par rapport au contenu. Ce qui n'est pas la même chose que les propriétés classiques height et width, qui définissent les dimensions de l'élément lui-même.

Prise en charge de la langue.

Si la page utilise des langues non latines, il est conseillé d'utiliser les propriétés logiques contain-intrinsic-block-size et contain-intrinsic-inline-size, ou la propriété résumée contain-intrinsic-size.

Valeurs pour contain-intrinsic-size.

• contain-intrinsic-size: none;

  Aucune dimension particulière n'est définie. Dans notre exemple ci-dessous c'est le flex-box qui détermine la hauteur des éléments, en se basant sur le deuxième élément puisque le premier est confiné sans indication de hauteur (un élément confiné à une hauteur de 0 par défaut).

  Flex-box

  contain:size;
  Ceci est le contenu initial de l'élément, présent dès le chargement de la page.

  contain:none;
  Deuxième élément du flex-box

• contain-intrinsic-size: 70px;

  Une valeur numérique positive ou nulle, suivie d'une des unités de dimension. La dimension intrinsèque de l'élément est fixée à la valeur indiquée, dans la direction correspondante (hauteur, largeur, blocs ou lignes).

  Dans notre exemple ci-dessous, la propriété contain-intrinsic-height du premier élément est fixée à 70 pixels.

  Flex-box

  contain:size;
  Ceci est le contenu initial de l'élément, présent dès le chargement de la page.

  contain:none;
  Deuxième élément du flex-box

• contain-intrinsic-size: auto 70px;

  La dimension intrinsèque de l'élément est fixée à la dernière valeur connue. A défaut c'est la valeur indiquée en deuxième position qui est prise en compte.

  Flex-box

  contain:size;
  Ceci est le contenu initial de l'élément, présent dès le chargement de la page.

  contain:none;
  Deuxième élément du flex-box

• contain-intrinsic-size: initial; (none) contain-intrinsic-size: inherit; contain-intrinsic-size: revert; contain-intrinsic-size: revertLayer; contain-intrinsic-size: unset;

  Liens vers la présentation de ces différentes valeurs : initial, inherit, revert, revert-layer, unset.

Animation des propriétés contain-intrinsic....

L'animation des propriétés contain-intrinsic... produit un effet comparable à l'animation des propriétés de dimension classiques : height, width, etc.

Support de contain-intrinsic-size.

La compatibilité des navigateurs actuels avec les propriétés contain-intrinsic... est très bonne, aussi bien pour les propriétés physiques, que pour les propriétés logiques.

1

Propriétés
physiques

2

Propriétés
logiques

3

Propriété
logique
résumée

Estimation de la prise en charge globale.

92%

91%

92%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

UC Browser pour Androïd

Opéra Mobile

QQ Browser

Baidu Browser

Opéra

Samsung Internet

Firefox pour Androïd

Edge

Firefox

Chrome pour Androïd

Androïd Brower

Safari

Safari sur IOS

Chrome

KaiOS Browser

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Caniuse

Caniuse

Évolution de la propriété contain-intrinsic-size.

• Module CSS - Dimensionnement des blocs Niveau 4

  Première présentation des propriétés contain-intrinsic-width, contain-intrinsic-height, contain-intrinsic-block-size, contain-intrinsic-inline-size, et de la propriété résumée contain-intrinsic-size.
  

  26 Mai 2020

  Document de travail.

  

  

  

Le dimensionnement des blocs. Voir aussi...

Le dimensionnement des blocs fait maintenant l'objet d'une spécification séparée : CSS Box Sizing Module, dans laquelle sont décrits également les termes suivants :

Propriétés :

Fonctions :

Valeurs: