Cet article met en avant quelques lignes de CSS puissantes qui font le gros du travail et vous aident à créer des mises en page modernes et robustes.
Les mises en page CSS modernes permettent aux développeurs d'écrire des règles de style vraiment utiles et robustes en quelques frappes seulement. La conférence ci-dessus et le post suivant examinent 10 lignes de CSS puissantes qui font un travail considérable.
Pour suivre ou tester ces démos vous-même, consultez l'intégration du site ci-dessus ou accédez à 1linelayouts.com.
01. Super centré : place-items: center
Pour la première mise en page "sur une seule ligne", résolvons le plus grand mystère de tout le CSS : centrer les éléments. Sachez que c'est plus facile que vous ne le pensez avec place-items: center.
Spécifiez d'abord grid comme méthode display, puis écrivez place-items: center sur le même élément. place-items est une notation abrégée permettant de définir align-items et justify-items en même temps. En le définissant sur center, align-items et justify-items sont définis sur center.
.parent {
display: grid;
place-items: center;
}
Cela permet de centrer parfaitement le contenu dans le parent, quelle que soit la taille intrinsèque.
02. Crêpe déstructurée : flex: <grow> <shrink> <baseWidth>
Ensuite, nous avons la crêpe déconstruite ! Il s'agit d'une mise en page courante pour les sites marketing, par exemple, qui peuvent comporter une rangée de trois éléments, généralement avec une image, un titre et du texte décrivant certaines caractéristiques d'un produit. Sur mobile, nous voulons que ces éléments s'empilent correctement et se développent à mesure que la taille de l'écran augmente.
En utilisant Flexbox pour cet effet, vous n'aurez pas besoin de requêtes média pour ajuster l'emplacement de ces éléments lorsque l'écran est redimensionné.
La notation abrégée flex signifie : flex: <flex-grow> <flex-shrink> <flex-basis>.
Par conséquent, si vous souhaitez que vos boîtes remplissent leur taille <flex-basis>, qu'elles rétrécissent pour les tailles plus petites, mais qu'elles ne s'étirent pas pour remplir l'espace supplémentaire, écrivez : flex: 0 1 <flex-basis>. Dans ce cas, votre <flex-basis> est 150px, ce qui donne :
.parent {
display: flex;
}
.child {
flex: 0 1 150px;
}
Si vous souhaitez que les boîtes s'étirent et remplissent l'espace lorsqu'elles passent à la ligne suivante, définissez <flex-grow> sur 1. La ligne de code se présentera comme suit :
.parent {
display: flex;
}
.child {
flex: 1 1 150px;
}
Maintenant, lorsque vous augmentez ou diminuez la taille de l'écran, ces éléments Flex se réduisent et s'agrandissent.
03. La barre latérale indique : grid-template-columns: minmax(<min>, <max>) …)
Cette démo utilise la fonction minmax pour les mises en page en grille. Ici, nous définissons la taille minimale de la barre latérale sur 150px, mais sur les écrans plus grands, nous la laissons s'étendre jusqu'à 25%. La barre latérale occupera toujours 25% de l'espace horizontal de son parent jusqu'à ce que ce 25% devienne inférieur à 150px.
Ajoutez-le en tant que valeur de grid-template-columns avec la valeur suivante :
minmax(150px, 25%) 1fr. L'élément de la première colonne (la barre latérale dans ce cas) obtient une minmax de 150px à 25%, et le deuxième élément (la section main ici) occupe le reste de l'espace en tant que piste 1fr unique.
.parent {
display: grid;
grid-template-columns: minmax(150px, 25%) 1fr;
}
04. Pancake Stack : grid-template-rows: auto 1fr auto
Contrairement à l'exemple de la crêpe déconstruite, celui-ci n'encapsule pas ses enfants lorsque la taille de l'écran change. Cette mise en page, souvent appelée pied de page fixe, est fréquemment utilisée pour les sites Web et les applications, dans les applications mobiles (le pied de page est généralement une barre d'outils) et les sites Web (les applications monopages utilisent souvent cette mise en page globale).
L'ajout de display: grid au composant vous donnera une grille à une seule colonne, mais la zone principale ne sera pas plus haute que le contenu avec le pied de page en dessous.
Pour que le pied de page reste en bas, ajoutez :
.parent {
display: grid;
grid-template-rows: auto 1fr auto;
}
Cela définit le contenu de l'en-tête et du pied de page pour qu'il prenne automatiquement la taille de ses enfants, et applique l'espace restant (1fr) à la zone principale, tandis que la ligne dimensionnée auto prendra la taille du contenu minimal de ses enfants. Ainsi, à mesure que le contenu augmente en taille, la ligne elle-même s'agrandit pour s'adapter.
05. Mise en page classique du Saint Graal : grid-template: auto 1fr auto / auto 1fr auto
Cette mise en page classique du Saint Graal comporte un en-tête, un pied de page, une barre latérale gauche, une barre latérale droite et un contenu principal. Elle est semblable à la mise en page précédente, mais avec des barres latérales.
Pour écrire l'intégralité de cette grille sur une seule ligne de code, utilisez la propriété grid-template. Cela vous permet de définir à la fois les lignes et les colonnes.
La paire propriété/valeur est la suivante : grid-template: auto 1fr auto / auto 1fr auto. La barre oblique entre la première et la deuxième liste séparées par des espaces correspond à la séparation entre les lignes et les colonnes.
.parent {
display: grid;
grid-template: auto 1fr auto / auto 1fr auto;
}
Comme dans le dernier exemple, où le contenu de l'en-tête et du pied de page était dimensionné automatiquement, les barres latérales de gauche et de droite sont ici dimensionnées automatiquement en fonction de la taille intrinsèque de leurs enfants. Cette fois, il s'agit de la taille horizontale (largeur) et non verticale (hauteur).
06. Grille de 12 colonnes : grid-template-columns: repeat(12, 1fr)
Ensuite, nous avons une autre grille classique : la grille à 12 colonnes. Vous pouvez écrire rapidement des grilles en CSS avec la fonction repeat(). L'utilisation de repeat(12, 1fr); pour les colonnes du modèle de grille vous donne 12 colonnes de 1fr chacune.
.parent {
display: grid;
grid-template-columns: repeat(12, 1fr);
}
.child-span-12 {
grid-column: 1 / 13;
}
Maintenant que vous disposez d'une grille de pistes à 12 colonnes, vous pouvez placer vos enfants sur la grille. Pour ce faire, vous pouvez les placer à l'aide des lignes de la grille. Par exemple, grid-column: 1 / 13 s'étendrait de la première à la treizième ligne et sur 12 colonnes. grid-column: 1 / 5; s'étendrait sur les quatre premiers.
Vous pouvez également écrire cette requête en utilisant le mot clé span. Avec span, vous définissez la ligne de départ, puis le nombre de colonnes à étendre à partir de ce point de départ. Dans ce cas, grid-column: 1 / span 12 équivaudra à grid-column: 1 / 13 et grid-column: 2 / span 6 équivaudra à grid-column: 2 / 8.
.child-span-12 {
grid-column: 1 / span 12;
}
07. RAM (Répéter, Auto, MinMax) : grid-template-columns(auto-fit, minmax(<base>, 1fr))
Pour ce septième exemple, combinez certains des concepts que vous avez déjà appris pour créer une mise en page responsive avec des enfants flexibles et placés automatiquement. Plutôt sympa, non ? Les termes clés à retenir ici sont repeat, auto-(fit|fill) et minmax()', que vous pouvez mémoriser à l'aide de l'acronyme RAM.
En regroupant tout, cela donne :
.parent {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
Vous utilisez à nouveau "Répète", mais cette fois en utilisant le mot clé auto-fit au lieu d'une valeur numérique explicite. Cela permet le placement automatique de ces éléments enfants. Ces enfants ont également une valeur minimale de base de 150px avec une valeur maximale de 1fr. Cela signifie que sur les petits écrans, ils occuperont toute la largeur de 1fr et, lorsqu'ils atteindront chacun une largeur de 150px, ils commenceront à se placer sur la même ligne.
Avec auto-fit, les boîtes s'étirent lorsque leur taille horizontale dépasse 150 px pour remplir tout l'espace restant. Toutefois, si vous définissez cette valeur sur auto-fill, ils ne s'étireront pas lorsque leur taille de base dans la fonction minmax sera dépassée :
.parent {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
08. Line-up : justify-content: space-between
Pour la mise en page suivante, le point principal à illustrer est justify-content: space-between, qui place les premier et dernier éléments enfants sur les bords de leur boîte englobante, l'espace restant étant réparti de manière égale entre les éléments. Pour ces cartes, le mode d'affichage Flexbox est utilisé, avec la direction définie sur "column" (colonne) à l'aide de flex-direction: column.
Le titre, la description et le bloc d'image sont alors placés dans une colonne verticale à l'intérieur de la fiche parente. Ensuite, l'application de justify-content: space-between ancre le premier élément (titre) et le dernier élément (bloc d'image) aux bords de la flexbox, et le texte descriptif entre les deux est placé avec un espacement égal à chaque point de terminaison.
.parent {
display: flex;
flex-direction: column;
justify-content: space-between;
}
09. Limiter Mon style : clamp(<min>, <actual>, <max>)
Nous allons maintenant aborder des techniques qui ne sont pas compatibles avec tous les navigateurs, mais qui ont des implications très intéressantes pour les mises en page et la conception d'UI responsives. Dans cette démo, vous définissez la largeur à l'aide de clamp comme suit : width: clamp(<min>, <actual>, <max>).
Cela définit une taille minimale et maximale absolues, ainsi qu'une taille réelle. Avec des valeurs, cela peut ressembler à ceci :
.parent {
width: clamp(23ch, 60%, 46ch);
}
La taille minimale est de 23ch, soit 23 unités de caractères, et la taille maximale est de 46ch, soit 46 caractères. Les unités de largeur de caractère sont basées sur la taille de la police de l'élément (plus précisément sur la largeur du glyphe 0). La taille "réelle" est de 50 %, ce qui représente 50 % de la largeur du parent de cet élément.
La fonction clamp() permet ici à cet élément de conserver une largeur de 50 % jusqu'à ce que 50 % soit supérieur à 46ch (sur les fenêtres d'affichage plus larges) ou inférieur à 23ch (sur les fenêtres d'affichage plus petites). Vous pouvez voir que lorsque j'étire et réduis la taille du parent, la largeur de cette carte augmente jusqu'à son point maximal bloqué et diminue jusqu'à son point minimal bloqué. Il reste ensuite centré dans le parent, car nous avons appliqué des propriétés supplémentaires pour le centrer. Cela permet d'obtenir des mises en page plus lisibles, car le texte ne sera pas trop large (au-dessus de 46ch) ni trop compressé et étroit (en dessous de 23ch).
C'est également un excellent moyen d'implémenter une typographie responsive. Par exemple, vous pouvez écrire : font-size: clamp(1.5rem, 20vw, 3rem). Dans ce cas, la taille de la police d'un titre resterait toujours comprise entre 1.5rem et 3rem, mais augmenterait et diminuerait en fonction de la valeur réelle de 20vw pour s'adapter à la largeur de la fenêtre d'affichage.
Il s'agit d'une excellente technique pour garantir la lisibilité avec une valeur de taille minimale et maximale, mais n'oubliez pas qu'elle n'est pas prise en charge par tous les navigateurs modernes. Assurez-vous donc d'avoir des solutions de remplacement et de faire vos tests.
10. Respect du format : aspect-ratio: <width> / <height>
Enfin, ce dernier outil de mise en page est le plus expérimental de tous. Il a récemment été introduit dans Chrome Canary (Chromium 84). Firefox s'efforce activement de l'implémenter, mais il n'est actuellement disponible dans aucune version stable des navigateurs.
Je tiens toutefois à le mentionner, car il s'agit d'un problème très fréquent. Il s'agit simplement de conserver le format d'une image.
Avec la propriété aspect-ratio, lorsque je redimensionne la fiche, le bloc visuel vert conserve ce format 16:9. Nous respectons le format avec aspect-ratio: 16 / 9.
.video {
aspect-ratio: 16 / 9;
}
Pour conserver un format 16:9 sans cette propriété, vous devez utiliser un hack padding-top et lui attribuer une marge intérieure de 56.25% pour définir un ratio entre le haut et la largeur. Nous allons bientôt ajouter une propriété pour éviter ce piratage et la nécessité de calculer le pourcentage. Vous pouvez créer un carré avec un format 1 / 1, un format 2:1 avec 2 / 1, et tout ce dont vous avez besoin pour que cette image soit mise à l'échelle avec un format défini.
.square {
aspect-ratio: 1 / 1;
}
Bien que cette fonctionnalité soit encore en cours de développement, il est bon de la connaître, car elle résout de nombreux problèmes que j'ai moi-même rencontrés en tant que développeur, en particulier en ce qui concerne les vidéos et les iFrames.
Conclusion
Merci d'avoir suivi ce parcours à travers 10 lignes de CSS efficaces. Pour en savoir plus, regardez la vidéo complète et essayez vous-même les démonstrations.