Conseil rapide: expédies des composants CSS résilients

Cet article montre comment les requêtes de conteneurs dans CSS créent des composants résilients et réutilisables avec des variations de mise en page intégrées, en réalisant une approche "Build Once, Deploy Everwhere". L'exemple se concentre sur un formulaire d'abonnement s'adaptant à différentes tailles d'écran.

Le formulaire utilise la grille CSS pour la flexibilité de la disposition. Trois zones de grille (légende, champ, soumission) sont définies et leurs modifications d'arrangement en fonction de la largeur du conteneur à l'aide de requêtes de conteneur. Une vidéo montre les ajustements de mise en page.

L'élément .subscription-form est désigné comme conteneur à l'aide de container-type: inline-size;. Une div imbriquée .form__content est ciblée par les requêtes de conteneur:

<code class="language-css">.subscription-form {
  container-type: inline-size;
}

.form__content {
  display: grid;
  gap: 1rem;
}</code>

Une première requête de conteneur (@container (min-width: 375px)) définit le modèle de grille pour les dispositions de taille moyenne:

<code class="language-css">@container (min-width: 375px) {
  .form__content {
    grid-template-areas: 
            "legend field" 
            "legend submit";
    align-items: center;
    column-gap: 2rem;
  }
  /* ... grid area assignments for legend, .form-group, button ... */
}</code>

Une deuxième requête (@container (min-width: 700px)) ajuste la mise en page pour les écrans plus grands:

<code class="language-css">@container (min-width: 700px) {
  .form__content {
    grid-template-areas: "legend field submit";
  }
  button {
    align-self: end;
  }
}</code>

Une autre vidéo montre le comportement réactif.

Une démonstration de codepen fournit un exemple interactif en direct. Cette approche présente la puissance des requêtes de conteneur pour créer des composants CSS réutilisables et adaptables. Cet extrait provient de libérer la puissance de CSS .

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!