Conseil rapide : Expédition de composants CSS résilients — SitePoint

Cela peut sembler assez audacieux, mais les 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.

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 : légende, champ et envoi. 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'abonnement, l'élément

a une classe subscription-form et est défini comme conteneur. Un

imbriqué avec une classe de contenu de formulaire est ce que nos requêtes de conteneur vont alors modifier :

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

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 :

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

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

La démo CodePen suivante fournit un exemple en direct de cette mise en page de formulaire (avec les poignées "Resize me!").

Voir les requêtes Pen Container 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 Unleashing the Power of CSS : Advanced Techniques for Responsive User Interfaces, disponible sur SitePoint Premium.

Stephanie Eckles est l'auteur de tutoriels approfondis sur ModernCSS.dev et le créateur de StyleStage.dev, SmolCSS.dev et 11ty.Rocks. Steph a plus d'une décennie d'expérience en développement Web qu'elle aime partager en tant qu'auteure, instructrice d'oeufs et d'ateliers, animatrice de podcast, streamer Twitch et conférencière. Elle défend l'accessibilité, le CSS évolutif et le Jamstack. Hors ligne, elle est maman de deux filles et d'un corgi cowboy et aime cuisiner.

Dans cette astuce rapide extraite de Libérer la puissance du CSS, Stephanie 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. Cet article est extrait de Unleashing the Power of CSS : Advanced Techniques for Responsive User Interfaces, disponible sur SitePoint Premium.