Une introduction aux requêtes de conteneurs dans CSS

Requêtes de conteneurs CSS: révolutionner la conception réactive

Cet extrait de déchaînant la puissance de CSS explore le potentiel transformateur des requêtes de conteneur dans les composants Web adaptables et résilients adaptables. Contrairement aux requêtes de médias de la fenêtre qui réagissent à l'ensemble de la taille de la fenêtre du navigateur, les requêtes de conteneur permettent un style en fonction de l'espace disponible d'un élément , permettant une réactivité véritablement au niveau des composants.

Requêtes de conteneurs vs 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 importants 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: Il existe une prise en charge du navigateur large pour les requêtes de conteneurs puisque Firefox 110. Les polyfills sont disponibles pour les navigateurs plus âgés.

Définition des requêtes de conteneur

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

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

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

Ensuite, utilisez le

à la règle pour définir la requête. L'exemple suivant définit la couleur @container en bleu lorsque son récipient est de 40ch de large ou plus: h2

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

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

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

Beyond

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

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

Sans requêtes en conteneur, les variations de cartes 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.

[Demo de codepen: cartes de requête multimédia de la fenêtre] (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

[Demo de codepen: requêtes de conteneur pour cartes] (lien vers le codepen)

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

Prise des clés:

• Les requêtes de conteneurs offrent une réactivité au niveau des composants.
• Ils sont définis en utilisant container-type et @container.
• 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.)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!