Style adapté à la taille

Présentation

Le style sensible à la taille permet aux composants de modifier leur mise en page ou leur apparence en fonction de l'espace dont ils disposent, plutôt que de la taille de l'écran entier. Cela est utile pour les composants tels que les fiches ou les barres de navigation qui peuvent être placés dans différentes parties d'une mise en page (comme une barre latérale étroite ou une zone principale large).

Nous vous recommandons d'utiliser des requêtes de conteneur, car elles rendent les composants véritablement modulaires. Vous n'avez pas besoin de savoir où le composant sera placé ni d'écrire des requêtes média complexes pour gérer toutes les mises en page possibles.

Implémentation

1. Définir le conteneur

OBLIGATOIRE : Vous devez d'abord indiquer au navigateur quel élément est le conteneur à mesurer.

.card-container {
  /* Define the container type. Use 'inline-size' for width-based queries. */
  /* You can also use 'size' for both width and height, but it requires explicit sizing. */
  container-type: inline-size;
}

2. Appliquer des styles en fonction de la taille du conteneur

Utilisez la règle @container pour appliquer des styles lorsque le conteneur atteint une certaine taille.

/* Default styles for small containers (stacked layout) */
.card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Styles for larger containers (side-by-side layout) */
/* This triggers when the container is wider than 400px */
@container (min-width: 400px) {
  .card {
    flex-direction: row;
    align-items: center;
  }
  
  .card-image {
    width: 150px;
    height: 150px;
  }
}

3. Afficher du contenu de manière conditionnelle

Vous pouvez également utiliser des requêtes de conteneur pour masquer ou afficher des détails supplémentaires lorsqu'il y a plus d'espace.

.card-details {
  /* Hide extra details by default in small spaces */
  display: none;
}

@container (min-width: 600px) {
  .card-details {
    /* Show details when there is plenty of room */
    display: block;
  }
}

Stratégies de remplacement

Pour les navigateurs qui ne sont pas compatibles avec les requêtes de conteneur, la meilleure approche consiste à utiliser une mise en page par défaut sécurisée (comme la mise en page verticale empilée) et à l'améliorer progressivement à l'aide de requêtes média si la taille générale de l'écran le permet.

/* Default safe stacked layout */
.card {
  display: flex;
  flex-direction: column;
}

/* Fallback using media queries for older browsers */
@media (min-width: 600px) {
  .card {
    flex-direction: row;
  }
}

/* Overwrite with container queries where supported */
@supports (container-type: inline-size) {
  @media (min-width: 600px) {
    .card {
      /* Reset media query fallback if needed, or let container query handle it */
      flex-direction: column;
    }
  }
  
  @container (min-width: 400px) {
    .card {
      flex-direction: row;
    }
  }
}

Cela permet aux utilisateurs de navigateurs plus anciens de bénéficier d'une mise en page exploitable, même si elle ne s'adapte pas parfaitement à chaque largeur de conteneur spécifique.