Fermer

juin 3, 2023

Expédition de composants CSS résilients —

Expédition de composants CSS résilients —


Dans cette astuce rapide extraite de Libérer la puissance du CSSStephanie montre comment les requêtes de conteneur nous permettent d’expédier des composants résilients contenant des variantes de mise en page et de style intégrées.

Cela peut sembler assez audacieux à dire, mais requêtes de conteneur nous permettent d’appliquer la méthodologie « construire une fois, déployer partout ». En tant qu’ingénieur de systèmes de conception, je suis vraiment attiré par la possibilité d’expédier des composants de systèmes de conception avec des variantes de disposition et de style intégrées.

Pour illustrer cette idée, l’image ci-dessous montre un formulaire d’abonnement. Des requêtes de conteneur ont été appliquées et le composant est affiché dans une zone pleine largeur dans l’espace le plus étroit de la barre latérale et à la largeur moyenne dans la zone de contenu.

La mise en page de notre formulaire de souscription dans deux environnements différents

Grid est un excellent compagnon pour composer ces variantes. En utilisant les zones de modèle de grille, nous sommes en mesure de réorganiser les sections de formulaire sans avoir besoin de balisage supplémentaire. Dans ce composant de formulaire d’abonnement, j’ai identifié trois zones de grille : legend, fieldet submit. Les superpositions ajoutées dans la vidéo suivante montrent comment la mise en page change selon les variantes.

Dans le code du formulaire d’inscription, le <form> l’élément a une classe subscription-form et est défini comme conteneur. Un imbriqué <div> avec une classe de form-content est ce que nos requêtes de conteneur vont alors modifier :

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

À la largeur par défaut la plus étroite, le formulaire est une simple pile de grilles avec un espace appliqué :

.form__content {
  display: grid;
  gap: 1rem;
}

La première requête de conteneur pour la mise en page de taille moyenne consiste à créer le modèle de grille et à attribuer tous les éléments aux zones de grille :

@container (min-width: 375px) {
  .form__content {
    grid-template-areas: 
            "legend field" 
            "legend submit";
    align-items: center;
    column-gap: 2rem;
  }

  legend {
    grid-area: legend;
  }

  .form-group {
    grid-area: field;
  }

  button {
    grid-area: submit;
  }
}

La deuxième et dernière requête de conteneur n’a plus qu’à ajuster le grid-template-areas définition pour aligner horizontalement les zones. Un seul ajustement supplémentaire est nécessaire, qui consiste à réaligner le S’abonner bouton à la position finale, ce qui l’aligne visuellement sur l’entrée de l’e-mail :

@container (min-width: 700px) {
  .form__content {
    grid-template-areas: 
            "legend field submit";
  }

  button {
    align-self: end;
  }
}

Le clip vidéo suivant montre la mise en page du formulaire d’abonnement s’ajustant à mesure que la largeur est réduite.

Ce qui suit Démo CodePen fournit un exemple en direct de cette disposition de formulaire de formulaire (avec des poignées « Redimensionnez-moi! »).

Voir le stylo
Requêtes de conteneur pour le formulaire d’abonnement
par SitePoint (@SitePoint)
sur CodePen.

Comme vous pouvez le voir, les requêtes de conteneur nous offrent la possibilité de créer des composants qui peuvent être réutilisés n’importe où.

Cet article est extrait de Libérer la puissance du CSS : techniques avancées pour des interfaces utilisateur réactivesdisponible sur SitePoint Premium.






Source link