CSS Container Queries: Revolutioning Reactive Design

Cet extrait de libére la puissance de CSS explore le potentiel transformateur des requêtes de conteneur dans l'élaboration de composants Web adaptables et résilients. Contrairement aux requêtes de médias de la fenêtre qui réagissent à la taille de la fenêtre du navigateur entier, les requêtes de conteneur permettent le style basé sur l'espace disponible d'un élément , permettant une réactivité véritable au niveau des composants.

requêtes de conteneur contre les requêtes de médias de la fenêtre

La conception réactive traditionnelle basée sur la fenêtre s'appuie sur des points d'arrêt liés à des tailles de périphériques simplifiées (mobile, tablette, bureau), souvent associées à une grille de mise en page. Cette approche lutte contre l'adaptabilité des composants individuels; Les éléments plus grands peuvent s'ajuster séparément, mais suivent généralement les points d'arrêt globaux.

Les requêtes de conteneurs offrent une solution supérieure. L'image suivante montre un composant de carte stylé avec des requêtes de conteneur, complètement indépendantes de la taille de la fenêtre. L'apparence de la carte s'adapte dynamiquement à son espace disponible.

Remarque: La prise en charge du navigateur large pour les requêtes de conteneur existe puisque Firefox 110. Les polyfills sont disponibles pour les navigateurs plus anciens.

Définition des requêtes de conteneur

Pour utiliser les requêtes de conteneur, déclarez d'abord un élément comme un conteneur à l'aide de la propriété

de type conteneur . inline-size (équivalent à la largeur dans les modes d'écriture horizontaux) est la valeur la plus courante et la plus largement prise en charge:

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

Ensuite, utilisez le

@ conteneur at-rule pour définir la requête. L'exemple suivant définit la couleur h2 en bleu lorsque son conteneur est de 40ch de large ou plus:

@container (min-width: 40ch) {
  h2 {
    color: blue;
  }
}

Pour une compatibilité plus large sur les modes d'écriture, utilisez des propriétés logiques:

@container (inline-size > 40ch) {
  h2 {
    color: blue;
  }
}

au-delà de

inline-size , les options incluent block-size et aspect ratio . Consultez la spécification officielle pour plus de détails.

Mise à niveau d'un composant de carte: un exemple pratique

Sans requêtes de conteneur, les variations de carte impliqueraient généralement des classes de modifications liées aux points d'arrêt de la fenêtre. L'image ci-dessous présente trois tailles de cartes et leurs classes correspondantes.

[Codepen Demo: Cartes de requête multimédia de vue] (lien vers codepen)

À l'aide de requêtes de conteneur, nous maintenons un style de carte par défaut (pour les navigateurs non pris en charge) et définissons des styles supplémentaires en fonction de la largeur du conteneur:

350px ou plus: disposition horizontale
600px ou plus: image comme arrière-plan

[Codepen Demo: Container Queries pour cartes] (lien vers Codepen)

Cet extrait provient de

de libération de la puissance de CSS: Techniques avancées pour les interfaces utilisateur réactives , disponibles sur SitePoint Premium.

clés à emporter:

Les requêtes de conteneur offrent une réactivité au niveau des composants.
Ils sont définis à l'aide de
• de type conteneur et @ conteneur .
les propriétés logiques améliorent la compatibilité du mode d'écriture croisée.
Ils fournissent une approche plus flexible et granulaire de la conception réactive que les requêtes des médias de la fenêtre.

(Remarque: Remplacez "Lien vers Codepen" par des liens codepen réels si disponibles.)