Requêtes de conteneur

Les requêtes média vous permettent d'ajuster les mises en page en fonction de la taille de la fenêtre d'affichage ou du type d'appareil utilisé. Les requêtes de conteneur vous permettent d'ajuster plus précisément les éléments en fonction de la taille et de l'état de leurs ancêtres ou conteneurs.

Imaginons que vous ayez un formulaire d'inscription à la newsletter destiné à être utilisé dans plusieurs contextes sur votre site. Vous pouvez souhaiter qu'il s'étende sur toute la largeur de la page sur une page d'inscription, mais qu'il soit divisé en colonnes sur une page contenant d'autres contenus.

Comme le montre cette démo, les requêtes de conteneur vous permettent d'ajuster les propriétés telles que la taille de la police, la marge intérieure et la mise en page de l'élément en fonction des attributs de son conteneur le plus proche, indépendamment de la taille de la fenêtre d'affichage.

Configurer une requête de conteneur

Contrairement aux requêtes média, les requêtes de conteneur sont établies en deux parties :

1. Définissez un conteneur.
2. Écrivez des styles pour un élément enfant à appliquer lorsqu'un conteneur parent correspond aux conditions de la requête.

Définir un conteneur

Vous pouvez définir un conteneur à l'aide de la propriété container-type.

.my-container-element {
  container-type: inline-size;
}

Un container-type de inline-size vous permet d'interroger l'axe inline du conteneur.

Pour interroger les axes inline et block, utilisez container-type: size.

main,
.my-component {
  container-type: size;
}

Les deux valeurs de container-type appliquent différents types de confinement de la taille. La propriété Inline-size d'un élément empêche ses descendants d'affecter sa taille en ligne.

Un élément avec une propriété de confinement size empêche ses descendants d'affecter sa taille sur les axes de bloc et en ligne.

Dans cet exemple, vous pouvez voir que la limitation de la taille peut affecter l'élément auquel elle est appliquée.

Comme il ne sera pas dimensionné en fonction de la taille de ses enfants (l'élément <p>), le conteneur se réduira à moins qu'une taille explicite ne lui soit attribuée en définissant ses dimensions (c'est-à-dire inline-size, block-size, aspect-ratio) ou en le plaçant dans une mise en page de taille explicite.

Conditions de requête de conteneur

Une fois le conteneur établi, vous pouvez ajouter une condition, entre parenthèses, qui doit être vraie pour que les styles à l'intérieur de la requête de conteneur soient appliqués. Pour les requêtes sur la taille des conteneurs, qui sont basées sur les dimensions des éléments ancêtres, la condition se compose des éléments suivants :

• une caractéristique de taille : width, height, inline-size, block-size, aspect-ratio ou orientation ;
• un opérateur de comparaison (>, <, = ou >=) ;
• et une valeur de longueur.

.my-container-element {
  container-type: inline-size;
}

@container (inline-size > 30em) {
  .my-child-element {
    /* styles to apply when .my-container-element is wider than 30em */
  }
}

Les conditions de caractéristiques de taille peuvent également être écrites avec un deux-points et une seule valeur à tester.

@container (orientation: landscape) {
  /*...*/
}

@container (min-width: 300px) {
  /*...*/
}

Vous pouvez également combiner plusieurs conditions à l'aide de mots clés tels que and et or, ou en enchaînant plusieurs conditions avec des opérateurs.

@container (inline-size > 40em) and (orientation: landscape)  {
  /*...*/
}

@container (height > 25vh) or (orientation: portrait) {
  /*...*/
}

@container ( 10em <= width <= 500px) {
  /*...*/
}

Nommer les conteneurs

Pour cibler des conteneurs spécifiques, même s'ils ne sont pas l'ancêtre le plus proche, vous pouvez nommer les conteneurs avec la propriété container-name. Vous pouvez ensuite faire référence au nom du conteneur que vous souhaitez interroger avant de définir vos conditions.

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

@container main-sidebar (inline-size > 20em)  {
  .button-group {
    display: flex;
    padding-inline: 1.25em;
  }
}

Le conteneur nommé doit toujours être un ancêtre des éléments stylisés.

Utiliser la forme abrégée avec la propriété container

La propriété container vous permet d'utiliser une syntaxe abrégée pour définir un conteneur et spécifier son type.

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

Le nom du conteneur précède la barre oblique, et le type de conteneur la suit.

Unités de requête de conteneur

Dans les conteneurs, vous avez également accès aux unités de longueur relatives des conteneurs. Cela offre plus de flexibilité pour les composants qui peuvent exister dans différents conteneurs, car les longueurs relatives s'ajustent en fonction des dimensions du conteneur.

Ici, l'unité de longueur du conteneur cqi (1 % de la taille inline d'un conteneur de requête) est utilisée pour la marge intérieure du bouton.

.container {
  container: button-container / inline-size;
}

.one {
  inline-size: 30vw;
}

.two {
  inline-size: 50vw;
}

button {
  padding: 2cqi 5cqi;
}

Les deux boutons ont les mêmes unités relatives appliquées, mais comme les unités sont relatives à la taille du conteneur, le deuxième bouton a plus de marge intérieure en raison de son conteneur plus grand.

Emboîter des requêtes de conteneur

Vous pouvez imbriquer des requêtes de conteneur dans des sélecteurs.

.my-element {
  display: grid;
  padding: 1em 2em;

  @container my-container (min-inline-size: 22em) {
    /* styles to apply when element's container is wider than 22em */
  }
}

/* equivalent to */
.my-element {
  display: grid;
  padding: 1em 2em;
}

@container my-container (min-inline-size: 22em) {
  .my-element {
     /* styles to apply when element's is wider than 22em */
  }
}

Vous pouvez également les imbriquer dans d'autres requêtes de conteneur ou règles @.

@container my-container (min-inline-size: 22em) {
  .my-element {
      /* styles to apply when element's is wider than 22em */
  }
}

@layer base {
  @container my-container (min-inline-size: 22em) {
    .my-element {
    /* styles to apply */
    }
  }
}

Vérifier que vous avez bien compris