Apprends Container Queries

Pourquoi les Container Queries ?

Les media queries te permettent de répondre à la taille du viewport, mais que se passe-t-il si un composant doit s'adapter en fonction de la taille de son conteneur ? Un composant carte peut apparaître dans une zone principale large ou dans une barre latérale étroite, et il doit être beau dans les deux cas, quelle que soit la largeur du viewport.

C'est exactement ce que les Container Queries résolvent. Elles te permettent d'appliquer des styles en fonction des dimensions d'un conteneur parent plutôt que du viewport.

css

/* 1. Définir un contexte de confinement */
.card-wrapper {
  container-type: inline-size;
}

/* 2. Interroger la taille du conteneur */
@container (min-width: 400px) {
  .card {
    display: flex;
    flex-direction: row;
  }
}

L'élément avec container-type devient le conteneur que les règles @container descendantes interrogent. C'est un changement fondamental dans le design responsive : les composants peuvent maintenant être auto-responsifs plutôt que de dépendre de la mise en page pour dicter leur apparence.

Syntaxe des Container Queries

html

<style>
  /* Define the container */
  .panel {
    container-type: inline-size;
    container-name: panel;
    padding: 16px;
    background: #0f172a;
    border: 1px solid #334155;
  }

  /* Base card style */
  .card {
    padding: 12px;
    background: #1e293b;
    border-radius: 8px;
  }

  .card-title { font-size: 16px; color: white; }
  .card-body  { font-size: 14px; color: #94a3b8; }

  /* When the panel container is wide enough */
  @container panel (min-width: 300px) {
    .card {
      display: flex;
      gap: 16px;
      align-items: center;
    }
    .card-title { font-size: 20px; }
  }
</style>

<div class="panel">
  <div class="card">
    <div class="card-title">Title</div>
    <div class="card-body">Adapts to container width.</div>
  </div>
</div>

Types de conteneurs et unités

La propriété container-type définit quel type de confinement est établi :

inline-size — Active les requêtes sur la dimension inline (largeur) du conteneur. C'est la valeur la plus courante.
size — Active les requêtes sur la largeur et la hauteur. Utilise cette valeur lorsque tu dois également interroger la dimension block (hauteur) du conteneur.
normal — La valeur par défaut. L'élément n'est pas un conteneur de requête.

Tu peux aussi nommer les conteneurs avec container-name et les cibler spécifiquement dans tes requêtes :

css

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

@container sidebar (max-width: 200px) {
  .widget { font-size: 12px; }
}

Les Container Queries introduisent également des unités de requête de conteneur :

cqw — 1% de la largeur du conteneur
cqh — 1% de la hauteur du conteneur
cqi — 1% de la taille inline du conteneur
cqb — 1% de la taille block du conteneur

css

@container (min-width: 300px) {
  .card-title { font-size: 5cqi; } /* scales with container */
}

Quelle est la différence clé entre les media queries et les container queries ?

Container Queries

Pourquoi les Container Queries ?

Syntaxe des Container Queries

Types de conteneurs et unités

Prêt à pratiquer ?