CodeWorlds
Propriété CSSMise en page et positionnement

container-type

Transforme un élément en conteneur dont les règles @container peuvent interroger la taille. Couvre aussi container-name et le raccourci container.

Valeur initiale
normal
Héritée
Non
Animable
non
S’applique à
tous les éléments
JavaScript
element.style.containerType = "inline-size"
Sur cette page

Exemple

#
CSS
.widget {
  container: stat / inline-size;
}

.widget .chart {
  display: none;
}

@container stat (width >= 260px) {
  .widget .chart {
    display: flex;
  }
}
Aperçu

Les deux widgets partagent le même code. Le graphique n’apparaît que dans un conteneur d’au moins 260px de large, donc la colonne étroite affiche seulement le nombre.

Définition et utilisation

#

La propriété container-type marque un élément comme conteneur pour les requêtes @container. Sans elle, les règles @container n’ont rien à mesurer et ne s’activent tout simplement pas. La valeur la plus utilisée est inline-size : le conteneur expose alors sa taille en ligne, c’est-à-dire sa largeur dans un texte horizontal, et les composants à l’intérieur peuvent s’y adapter.

Ce confort a un prix. La taille que l’on peut interroger ne doit pas dépendre du contenu, sinon le style et la taille se poursuivraient indéfiniment l’un l’autre. Avec inline-size, la largeur du conteneur cesse donc de dépendre de son contenu : un élément qui s’ajusterait normalement à son contenu, par exemple inline-block ou float sans largeur définie, peut se réduire à zéro. Avec size, cela concerne les deux dimensions, donc il faut définir la hauteur soi-même.

La propriété container-name donne un nom au conteneur, voire plusieurs noms séparés par des espaces. La requête @container nom (…) cible alors l’ancêtre le plus proche portant ce nom, et une requête sans nom cible l’ancêtre le plus proche qui est un conteneur. Le raccourci container: nom / type définit les deux propriétés à la fois, par exemple container: sidebar / inline-size.

Les requêtes elles-mêmes, les unités cqi et des modèles de composants prêts à l’emploi sont décrits dans l’entrée @container. Ici, on se concentre sur la façon de définir un conteneur et sur ce qu’il faut en attendre.

Syntaxe

#
Syntaxe
container-type: normal | size | inline-size;
container-name: none | <nom>+;
container: <nom> [ / <type> ]?;

Valeurs

#

  • normal

    L’élément n’est pas un conteneur pour les requêtes de taille. La règle @container (width >= 260px) de la démo n’a rien à quoi se référer, donc la carte reste verticale même dans un cadre large. C’est la valeur par défaut.

  • inline-size

    Le cadre expose sa largeur, et à partir de 260px la carte s’organise horizontalement. Faites glisser le coin inférieur droit du cadre vers la gauche, et la carte reviendra à une mise en page verticale.

  • size

    Le conteneur expose la largeur et la hauteur, mais sa hauteur cesse de dépendre du contenu. Sans hauteur définie, le cadre s’effondre jusqu’à ne garder que son padding, et la carte disparaît sous overflow: hidden.

  • size + height

    avec une hauteur définie

    Avec une hauteur fixée, un conteneur de type size fonctionne correctement, et les requêtes peuvent aussi vérifier height. Réduisez le cadre verticalement en faisant glisser son coin, et l’image disparaîtra.

  • container: lesson / inline-size

    raccourci : nom / type

    Le raccourci définit un nom et un type en même temps. La règle @container lesson ne cible que le conteneur nommé lesson, et ici elle change aussi l’arrière-plan de la carte.

Valeurs en pratique

#

normal

L’élément n’est pas un conteneur pour les requêtes de taille. La règle @container (width >= 260px) de la démo n’a rien à quoi se référer, donc la carte reste verticale même dans un cadre large. C’est la valeur par défaut.
.demo { container-type: normal; }

inline-size

Le cadre expose sa largeur, et à partir de 260px la carte s’organise horizontalement. Faites glisser le coin inférieur droit du cadre vers la gauche, et la carte reviendra à une mise en page verticale.
.demo { container-type: inline-size; }

size

Le conteneur expose la largeur et la hauteur, mais sa hauteur cesse de dépendre du contenu. Sans hauteur définie, le cadre s’effondre jusqu’à ne garder que son padding, et la carte disparaît sous overflow: hidden.
.demo { container-type: size; }

size + height

Avec une hauteur fixée, un conteneur de type size fonctionne correctement, et les requêtes peuvent aussi vérifier height. Réduisez le cadre verticalement en faisant glisser son coin, et l’image disparaîtra.
.demo { container-type: size; height: 150px; resize: both; }

@container (height < 110px) {
  .thumb { display: none; }
}

container: lesson / inline-size

Le raccourci définit un nom et un type en même temps. La règle @container lesson ne cible que le conteneur nommé lesson, et ici elle change aussi l’arrière-plan de la carte.
.demo { container: lesson / inline-size; }

@container lesson (width >= 260px) {
  .card { background: #1e1b4b; }
}

Compatibilité des navigateurs

#

Largement disponible · depuis 2023

Fonctionne dans tous les navigateurs modernes, y compris sur mobile. Vous pouvez l’utiliser sans crainte.

  • Chrome
  • Edge
  • Firefox
  • Safari

Bonnes pratiques

#
  • Faites du conteneur l’enveloppe du composant, par exemple une colonne de grille ou un emplacement de mise en page, pas le composant lui-même. Les règles @container ne stylisent que les descendants du conteneur.
  • Dans la grande majorité des cas, choisissez inline-size. Le type size n’a de sens que lorsque la hauteur du conteneur est de toute façon fixée, par exemple dans un panneau à hauteur constante.
  • Nommez les conteneurs selon leur rôle (sidebar, main, card). Avec des conteneurs imbriqués, une requête ne ciblera alors pas le mauvais ancêtre.

Entrées associées

#

Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.

Leçons gratuitesPratiquez CSS dans le cours HTML et CSSDes exercices avec indices, un éditeur de code et une progression enregistrée au fur et à mesure.Voir le cours
Nous utilisons des cookies pour améliorer ton expérience sur le site
Politique de confidentialité
OK