@container

Baseline Widely available *

Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis ⁨février 2023⁩.

* Certaines parties de cette fonctionnalité peuvent bénéficier de prise en charge variables.

La règle @ CSS @container est une règle conditionnelle de groupe qui applique des styles à un contexte de conteneur. Les déclarations de style sont filtrées par une condition et appliquées au conteneur si la condition est vraie. La condition est évaluée lorsque la taille du conteneur interrogé, le <style-feature> ou l'état de défilement changent.

La propriété container-name spécifie une liste de noms de conteneurs de requête. Ces noms peuvent être utilisés par les règles @container pour filtrer les conteneurs ciblés. Le <container-name> optionnel et sensible à la casse filtre les conteneurs ciblés par la requête.

Une fois qu'un conteneur de requête éligible a été sélectionné pour un élément, chaque fonctionnalité de conteneur dans le <container-condition> est évaluée par rapport à ce conteneur.

Syntaxe

css

/* Avec une <size-query> */
@container (width > 400px) {
  h2 {
    font-size: 1.5em;
  }
}

/* Avec un <container-name> optionnel */
@container tall (height > 30rem) {
  p {
    line-height: 1.6;
  }
}

/* Avec un <scroll-state> */
@container scroll-state(scrollable: top) {
  .back-to-top-link {
    visibility: visible;
  }
}

/* Avec un <container-name> et un <scroll-state> */
@container sticky-heading scroll-state(stuck: top) {
  h2 {
    background: purple;
    color: white;
  }
}

/* Multiple requêtes dans une seule condition */
@container (width > 400px) and style(--responsive: true) {
  h2 {
    font-size: 1.5em;
  }
}

/* Liste de conditions */
@container card (width > 400px), style(--responsive: true), scroll-state(stuck: top) {
  h2 {
    font-size: 1.5em;
  }
}

Paramètres

<container-condition>

Un <container-name> optionnel et un <container-query>. Les styles définis dans la <stylesheet> sont appliqués si la condition est vraie.

<container-name>: Optionnel. Le nom du conteneur auquel les styles seront appliqués lorsque la requête est vraie, spécifié comme un <ident>.
<container-query>: Un ensemble de fonctionnalités évaluées sur le conteneur interrogé lorsque la taille, le <style-feature> ou l'état de défilement du conteneur changent.

Mots-clés logiques dans les requêtes de conteneur

Des mots-clés logiques peuvent être utilisés pour définir la condition du conteneur :

and combine deux conditions ou plus.
or combine deux conditions ou plus.
not nie la condition. Un seul « not » est autorisé par requête de conteneur et il ne peut pas être utilisé avec les mots-clés and ou or.

css

@container (width > 400px) and (height > 400px) {
  /* <stylesheet> */
}

@container (width > 400px) or (height > 400px) {
  /* <stylesheet> */
}

@container not (width < 400px) {
  /* <stylesheet> */
}

Contextes de conteneur nommés

Un contexte de conteneur peut être nommé à l'aide de la propriété container-name.

css

.post {
  container-name: sidebar;
  container-type: inline-size;
}

La syntaxe raccourcie consiste à utiliser container sous la forme container: <name> / <type>, par exemple :

css

.post {
  container: sidebar / inline-size;
}

Dans les requêtes de conteneur, la propriété container-name permet de filtrer l'ensemble des conteneurs pour ne garder que ceux dont le nom correspond à la requête :

css

@container sidebar (width > 400px) {
  /* <stylesheet> */
}

Les détails sur l'utilisation et les restrictions de nommage sont décrits dans la page container-name.

Descripteurs

Les requêtes <container-condition> incluent les descripteurs de conteneur size et scroll-state.

Descripteurs de taille de conteneur

Le <container-condition> peut inclure une ou plusieurs requêtes booléennes de taille, chacune entre parenthèses. Une requête de taille inclut un descripteur de taille, une valeur et — selon le descripteur — un opérateur de comparaison. Les requêtes mesurent toujours la boîte de contenu pour la comparaison. La syntaxe pour inclure plusieurs conditions est la même que pour les requêtes de fonctionnalités de taille @media.

css

@container (min-width: 400px) {
  /* … */
}
@container (orientation: landscape) and (width > 400px) {
  /* … */
}
@container (15em <= block-size <= 30em) {
  /* … */
}

aspect-ratio: Le aspect-ratio du conteneur, calculé comme le rapport largeur/hauteur du conteneur, exprimé en <ratio>.
block-size: Le block-size du conteneur, exprimé en <length>.
height: La hauteur du conteneur, exprimée en <length>.
inline-size: Le inline-size du conteneur, exprimé en <length>.
orientation: L'orientation du conteneur, soit landscape, soit portrait.
width: La largeur du conteneur, exprimée en <length>.

Descripteurs d'état de défilement du conteneur

Les descripteurs d'état de défilement sont spécifiés dans le <container-condition> entre parenthèses après le mot-clé scroll-state, par exemple :

css

@container scroll-state(scrollable: top) {
  /* … */
}
@container scroll-state(stuck: inline-end) {
  /* … */
}
@container scroll-state(snapped: both) {
  /* … */
}

Les mots-clés pris en charge pour les descripteurs d'état de défilement incluent les valeurs physiques et les valeurs relatives de flux.

scrollable

Vérifie si le conteneur peut être défilé dans la direction donnée par une action de l'utilisateur·ice (barre de défilement, geste tactile, etc.). Autrement dit, y a-t-il du contenu débordant dans la direction donnée qui peut être atteint par défilement ? Les valeurs valides pour scrollable incluent :

none: Le conteneur n'est pas un scroll container ou ne peut pas être défilé dans aucune direction.
top: Le conteneur peut être défilé vers son bord supérieur.
right: Le conteneur peut être défilé vers son bord droit.
bottom: Le conteneur peut être défilé vers son bord inférieur.
left: Le conteneur peut être défilé vers son bord gauche.
x: Le conteneur peut être défilé horizontalement vers la gauche, la droite ou les deux.
y: Le conteneur peut être défilé verticalement vers le haut, le bas ou les deux.
block-start: Le conteneur peut être défilé vers le début du bloc.
block-end: Le conteneur peut être défilé vers la fin du bloc.
inline-start: Le conteneur peut être défilé vers le début de la ligne.
inline-end: Le conteneur peut être défilé vers la fin de la ligne.
block: Le conteneur peut être défilé dans la direction du bloc vers le début, la fin ou les deux.
inline: Le conteneur peut être défilé dans la direction de la ligne vers le début, la fin ou les deux.

Si le test est réussi, les règles à l'intérieur du bloc @container sont appliquées aux descendants du conteneur défilant.

Pour vérifier si un conteneur est défilable, sans se soucier de la direction, utilisez la valeur none avec l'opérateur not :

css

@container not scroll-state(scrollable: none) {
  /* … */
}

snapped

Vérifie si le conteneur va être aligné (« snapped ») sur un conteneur parent de type scroll snap selon l'axe donné. Les valeurs valides pour snapped incluent :

none: Le conteneur n'est pas une cible d'accrochage pour son conteneur parent. Si on utilise snapped: none, les conteneurs qui sont des cibles d'accrochage n'auront pas les styles @container, tandis que les non-cibles les auront.
x: Le conteneur est une cible d'accrochage horizontale pour son conteneur parent.
y: Le conteneur est une cible d'accrochage verticale pour son conteneur parent.
block: Le conteneur est une cible d'accrochage sur l'axe du bloc pour son conteneur parent.
inline: Le conteneur est une cible d'accrochage sur l'axe de la ligne pour son conteneur parent.
both: Le conteneur est à la fois une cible d'accrochage horizontale et verticale pour son conteneur parent. Il ne correspondra pas si l'accrochage ne se fait que sur un seul axe.

Pour vérifier un conteneur avec une requête snapped différente de none, il doit avoir un conteneur parent avec une valeur scroll-snap-type différente de none. Une requête snapped: none correspondra même s'il n'y a pas de conteneur parent de type scroll snap.

L'évaluation a lieu lors des événements scrollsnapchanging sur le conteneur scroll snap. Si le test est réussi, les règles à l'intérieur du bloc @container sont appliquées aux descendants du conteneur.

Pour vérifier si un conteneur est une cible d'accrochage, sans se soucier de la direction, utilisez la valeur none avec l'opérateur not :

css

@container not scroll-state(snapped: none) {
  /* … */
}

stuck

Vérifie si un conteneur avec la propriété position à sticky est collé à un bord de son conteneur parent défilant. Les valeurs valides pour stuck incluent :

none: Le conteneur n'est collé à aucun bord. À noter que les requêtes none correspondent même si le conteneur n'a pas position: sticky.
top: Le conteneur est collé au bord supérieur de son conteneur.
right: Le conteneur est collé au bord droit de son conteneur.
bottom: Le conteneur est collé au bord inférieur de son conteneur.
left: Le conteneur est collé au bord gauche de son conteneur.
block-start: Le conteneur est collé au début du bloc de son conteneur.
block-end: Le conteneur est collé à la fin du bloc de son conteneur.
inline-start: Le conteneur est collé au début de la ligne de son conteneur.
inline-end: Le conteneur est collé à la fin de la ligne de son conteneur.

Pour vérifier un conteneur avec une requête stuck différente de none, il doit avoir position: sticky et être dans un conteneur défilant. Si le test est réussi, les règles à l'intérieur du bloc @container sont appliquées aux descendants du conteneur sticky.

Il est possible que deux valeurs d'axes opposés correspondent en même temps :

css

@container scroll-state((stuck: top) and (stuck: left)) {
  /* … */
}

Cependant, deux valeurs de bords opposés ne correspondront jamais en même temps :

css

@container scroll-state((stuck: left) and (stuck: right)) {
  /* … */
}

Pour vérifier si un conteneur est collé, sans se soucier de la direction, utilisez la valeur none avec l'opérateur not :

css

@container not scroll-state(stuck: none) {
  /* … */
}

Syntaxe formelle

@container = 
  @container <container-condition># { <block-contents> }  

<container-condition> = 
  [ <container-name>? <container-query>? ]!  

<container-name> = 
  <custom-ident>  

<container-query> = 
  not <query-in-parens>                               |
  <query-in-parens> [ [ and <query-in-parens> ]* | [ or <query-in-parens> ]* ]  

<query-in-parens> = 
  ( <container-query> )                 |
  ( <size-feature> )                    |
  style( <style-query> )                |
  scroll-state( <scroll-state-query> )  |
  <general-enclosed>                    

<style-query> = 
  not <style-in-parens>                               |
  <style-in-parens> [ [ and <style-in-parens> ]* | [ or <style-in-parens> ]* ]  |
  <style-feature>                                     

<scroll-state-query> = 
  not <scroll-state-in-parens>                        |
  <scroll-state-in-parens> [ [ and <scroll-state-in-parens> ]* | [ or <scroll-state-in-parens> ]* ]  |
  <scroll-state-feature>                              

<general-enclosed> = 
  [ <function-token> <any-value>? ) ]  |
  [ ( <any-value>? ) ]                 

<style-in-parens> = 
  ( <style-query> )    |
  ( <style-feature> )  |
  <general-enclosed>   

<style-feature> = 
  <style-feature-plain>    |
  <style-feature-boolean>  |
  <style-range>            

<scroll-state-in-parens> = 
  ( <scroll-state-query> )    |
  ( <scroll-state-feature> )  |
  <general-enclosed>          

<style-feature-plain> = 
  <style-feature-name> : <style-feature-value>  

<style-feature-boolean> = 
  <style-feature-name>  

<style-range> = 
  <style-range-value> <mf-comparison> <style-range-value>  |
  <style-range-value> <mf-lt> <style-range-value> <mf-lt> <style-range-value>  |
  <style-range-value> <mf-gt> <style-range-value> <mf-gt> <style-range-value>  

<style-range-value> = 
  <custom-property-name>  |
  <style-feature-value>   

<mf-comparison> = 
  <mf-lt>  |
  <mf-gt>  |
  <mf-eq>  

<mf-lt> = 
  '<' '='?  

<mf-gt> = 
  '>' '='?  

<mf-eq> = 
  '='

Exemples

Appliquer des styles selon la taille d'un conteneur

Considérez l'exemple suivant d'un composant carte avec un titre et du texte :

html

<div class="post">
  <div class="card">
    <h2>Titre de la carte</h2>
    <p>Contenu de la carte</p>
  </div>
</div>

Un contexte de conteneur peut être créé avec la propriété container-type, ici avec la valeur inline-size sur la classe .post. Vous pouvez ensuite utiliser la règle @container pour appliquer des styles à l'élément .card dans un conteneur de moins de 650px de large.

const post = document.querySelector(".post");
const span = document.createElement("span");
span.textContent = `.post width: ${post.clientWidth}px`;
post.parentNode.insertBefore(span, post.nextSibling);
// mise à jour lors du redimensionnement
window.addEventListener("resize", () => {
  span.textContent = `.post width: ${post.clientWidth}px`;
});

span {
  display: block;
  text-align: center;
}
.card {
  margin: 10px;
  border: 2px dotted;
  font-size: 1.5em;
}
.post {
  border: 2px solid;
}

css

/* Un contexte de conteneur basé sur la taille en ligne */
.post {
  container-type: inline-size;
}

/* Appliquer des styles si le conteneur fait moins de 650px */
@container (width < 650px) {
  .card {
    width: 50%;
    background-color: lightgray;
    font-size: 1em;
  }
}

Créer des contextes de conteneur nommés

Prenons l'exemple HTML suivant, un composant carte avec un titre et du texte :

html

<div class="post">
  <div class="card">
    <h2>Titre de la carte</h2>
    <p>Contenu de la carte</p>
  </div>
</div>

Commencez par créer un contexte de conteneur avec les propriétés container-type et container-name. La syntaxe raccourcie pour cette déclaration est décrite dans la page container.

css

.post {
  container-type: inline-size;
  container-name: summary;
}

Ciblez ensuite ce conteneur en ajoutant le nom à la requête de conteneur :

css

@container summary (width >= 400px) {
  .card {
    font-size: 1.5em;
  }
}

Requêtes de conteneur imbriquées

Il n'est pas possible de cibler plusieurs conteneurs dans une seule requête de conteneur. Il est possible d'imbriquer des requêtes de conteneur pour obtenir le même effet.

La requête suivante s'applique si le conteneur nommé summary fait plus de 400px de large et possède un conteneur ancêtre de plus de 800px de large :

css

@container summary (width > 400px) {
  @container (width > 800px) {
    /* <stylesheet> */
  }
}

Requêtes de style de conteneur

Les requêtes de conteneur peuvent aussi évaluer le style calculé de l'élément conteneur. Une requête de style de conteneur est une requête @container qui utilise une ou plusieurs notations fonctionnelles style(). La syntaxe booléenne et la logique de combinaison des fonctionnalités de style dans une requête de style sont les mêmes que pour les requêtes de fonctionnalités CSS.

css

@container style(<style-feature>),
    not style(<style-feature>),
    style(<style-feature>) and style(<style-feature>),
    style(<style-feature>) or style(<style-feature>) {
  /* <stylesheet> */
}

Le paramètre de chaque style() est un seul <style-feature>. Un <style-feature> est une déclaration CSS valide, une propriété CSS ou un <custom-property-name>.

css

@container style(--themeBackground),
    not style(background-color: red),
    style(color: green) and style(background-color: transparent),
    style(--themeColor: blue) or style(--themeColor: purple) {
  /* <stylesheet> */
}

Une fonctionnalité de style sans valeur est vraie si la valeur calculée est différente de la valeur initiale pour la propriété donnée.

Si le <style-feature> passé en argument à la fonction style() est une déclaration, la requête de style est vraie si la valeur de la déclaration est identique à la valeur calculée de cette propriété pour le conteneur interrogé. Sinon, elle est fausse.

La requête suivante vérifie si la valeur calculée de la propriété --accent-color du conteneur est blue :

css

@container style(--accent-color: blue) {
  /* <stylesheet> */
}

Note : Si une propriété personnalisée a pour valeur blue, le code hexadécimal équivalent #0000ff ne correspondra pas, sauf si la propriété a été définie comme une couleur avec @property pour que le navigateur puisse comparer correctement les valeurs calculées.

Les fonctionnalités de style qui interrogent une propriété raccourcie sont vraies si les valeurs calculées correspondent pour chacune de ses propriétés longues, et fausses sinon. Par exemple, @container style(border: 2px solid red) sera vrai si les 12 propriétés longues qui composent ce raccourci (border-bottom-style, etc.) sont toutes vraies.

Les valeurs globales revert et revert-layer sont invalides dans un <style-feature> et rendent la requête de style de conteneur fausse.

Requêtes d'état de défilement

Voir Utiliser les requêtes d'état de défilement de conteneur pour des exemples détaillés.

Spécifications

Specification
CSS Conditional Rules Module Level 5 # container-rule

Compatibilité des navigateurs

Voir aussi

Help improve MDN

Learn how to contribute

Cette page a été modifiée le ⁨29 sept. 2025⁩ par les contributeurs du MDN.

View this page on GitHub • Report a problem with this content