Cet article présente quelques lignes de code CSS performantes, qui demandent beaucoup d'efforts 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 efficaces et pertinentes en quelques frappes seulement. La présentation ci-dessus et l'article suivant s'intéressent à 10 lignes de code CSS performantes, qui demandent beaucoup d'efforts.
Pour suivre ces démonstrations ou jouer par vous-même, consultez l'intégration de Glitch ci-dessus, ou accédez à 1linelayouts.glitch.me.
01. Super-centré: place-items: center
Pour la première mise en page sur une seule ligne, nous allons résoudre le plus gros mystère de tout le domaine CSS: le centrage. 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 un raccourci pour définir à la fois align-items et justify-items. En la définissant sur center, align-items et justify-items seront tous les deux définis sur center.
.parent {
display: grid;
place-items: center;
}
Le contenu est ainsi parfaitement centré dans le parent, quelle que soit la taille intrinsèque.
02. The Deconstructed Pancake: flex: <grow> <shrink> <baseWidth>
Vient ensuite la crêpe démontée ! Il s'agit d'une mise en page courante sur les sites marketing, par exemple, qui peuvent comporter une ligne de trois articles, généralement avec une image, un titre, puis du texte décrivant certaines caractéristiques d'un produit. Sur les mobiles, nous voulons que ces éléments s'empilent parfaitement et qu'ils se développent à mesure que nous augmentons la taille de l'écran.
Si vous utilisez Flexbox pour cet effet, vous n'aurez pas besoin de requêtes média pour ajuster la position de ces éléments lors du redimensionnement de l'écran.
Le raccourci flex signifie: flex: <flex-grow> <flex-shrink> <flex-basis>.
De ce fait, si vous souhaitez que vos boîtes remplissent leur taille <flex-basis>, rétrécissent pour les tailles plus petites, mais pas étirer pour remplir tout espace supplémentaire, écrivez: flex: 0 1 <flex-basis>. Dans ce cas, votre <flex-basis> est 150px. Voici comment se présente:
.parent {
display: flex;
}
.child {
flex: 0 1 150px;
}
Si vous voulez que les zones s'étirent et remplissent l'espace à mesure qu'elles arrivent à la ligne suivante, définissez <flex-grow> sur 1, comme suit:
.parent {
display: flex;
}
.child {
flex: 1 1 150px;
}
Désormais, lorsque vous augmentez ou diminuez la taille de l'écran, ces éléments flexibles se réduisent à la fois.
03. La barre latérale indique: grid-template-columns: minmax(<min>, <max>) …)
Cette démonstration utilise la fonction minmax pour les mises en page en grille. Ici, nous allons définir la taille minimale de la barre latérale sur 150px, mais sur les grands écrans, ce qui permet d'étendre la barre jusqu'à 25%. La barre latérale occupera toujours 25% de l'espace horizontal de l'élément parent jusqu'à ce que cette 25% devienne inférieure à 150px.
Ajoutez cette valeur 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 à Deconstructed Pancake, cet exemple n'encapsule pas ses enfants lorsque la taille de l'écran change. Souvent appelée pied de page fixe, cette mise en page est souvent utilisée pour les sites Web et les applications, 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).
Si vous ajoutez display: grid au composant, vous obtiendrez une grille à une seule colonne, mais la taille de la zone principale dépendra uniquement de la hauteur du contenu avec le pied de page en dessous.
Pour que le pied de page reste attaché au bas, ajoutez:
.parent {
display: grid;
grid-template-rows: auto 1fr auto;
}
Ainsi, le contenu de l'en-tête et du pied de page prend automatiquement la taille de ses enfants et applique l'espace restant (1fr) à la zone principale, tandis que la ligne de taille auto prend la taille du contenu minimal de ses enfants. Ainsi, à mesure que la taille du contenu augmente, la ligne elle-même s'ajuste.
05. Mise en page classique du Saint Graal: grid-template: auto 1fr auto / auto 1fr auto
Pour cette mise en page classique du Saint-Graal, il y a 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 elle comporte désormais des barres latérales.
Pour écrire l'intégralité de cette grille à l'aide d'une seule ligne de code, utilisez la propriété grid-template. Cela vous permet de définir les lignes et les colonnes en même temps.
La paire propriété/valeur est grid-template: auto 1fr auto / auto 1fr auto. La barre oblique située entre la première et la deuxième liste séparée par des espaces constitue la rupture entre les lignes et les colonnes.
.parent {
display: grid;
grid-template: auto 1fr auto / auto 1fr auto;
}
Comme dans le dernier exemple, où l'en-tête et le pied de page comportaient du contenu automatiquement dimensionné, les barres latérales gauche et droite sont automatiquement redimensionnées en fonction de la taille intrinsèque de leurs enfants. Cependant, il s'agit cette fois-ci de la taille horizontale (largeur) au lieu de verticale (hauteur).
06. Grille à 12 segments: grid-template-columns: repeat(12, 1fr)
Nous avons ensuite un autre classique: la grille à 12 segments. La fonction repeat() vous permet d'écrire rapidement des grilles en CSS. En utilisant repeat(12, 1fr); pour les colonnes du modèle de grille, vous obtenez 12 colonnes chacune de type 1fr.
.parent {
display: grid;
grid-template-columns: repeat(12, 1fr);
}
.child-span-12 {
grid-column: 1 / 13;
}
Maintenant que vous avez une grille de suivi de 12 colonnes, nous pouvons y placer nos enfants. Une façon de le faire serait de les placer à l’aide de lignes de grille. Par exemple, grid-column: 1 / 13 couvrirait l'intégralité de la ligne, de la première à la dernière (13e) et 12 colonnes. grid-column: 1 / 5; couvrirait les quatre premiers.
Vous pouvez également écrire cela en utilisant le mot clé span. Avec span, vous définissez la ligne de départ, puis le nombre de colonnes à parcourir à partir de ce point. Dans ce cas, grid-column: 1 / span 12 équivaut à grid-column: 1 / 13 et grid-column: 2 / span 6 à grid-column: 2 / 8.
.child-span-12 {
grid-column: 1 / span 12;
}
07. RAM (répétition, automatique, minimale maximale): 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 placés automatiquement et flexibles. Plutôt chouette. Les termes clés à retenir ici sont repeat, auto-(fit|fill) et minmax()'. Vous vous en souvenez avec l'acronyme RAM.
L'ensemble se présente comme suit:
.parent {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
Vous utilisez à nouveau la répétition, mais cette fois avec le mot clé auto-fit au lieu d'une valeur numérique explicite. Cela permet de placer automatiquement ces éléments enfants. Ces enfants ont également une valeur minimale de base de 150px avec une valeur maximale 1fr, ce qui signifie que sur les petits écrans, ils occuperont toute la largeur de 1fr et, lorsqu'ils atteindront chacun 150px de large, ils commenceront à se déplacer sur la même ligne.
Avec auto-fit, les cadres sont étirés, car leur taille horizontale dépasse 150 pixels pour occuper la totalité de l'espace restant. Toutefois, si vous la remplacez par auto-fill, elles ne seront pas étirées 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. Lineup: justify-content: space-between
Pour la mise en page suivante, le principal point à illustrer ici est justify-content: space-between, qui place les premier et dernier éléments enfants aux bords de leur cadre de délimitation, l'espace restant étant réparti uniformément entre les éléments. Pour ces fiches, elles sont placées en mode d'affichage Flexbox, la direction étant définie sur la colonne à l'aide de flex-direction: column.
Le titre, la description et le bloc d'images sont alors placés dans une colonne verticale à l'intérieur de la fiche parente. Ensuite, l'application de justify-content: space-between ancre les premier et dernier éléments (titre) et le dernier élément (bloc image) sur les bords de l'appareil flexible. Le texte descriptif situé entre ces éléments est placé à un espacement égal à chaque extrémité.
.parent {
display: flex;
flex-direction: column;
justify-content: space-between;
}
09. Ajuster mon style: clamp(<min>, <actual>, <max>)
Nous allons aborder ici certaines techniques qui sont moins compatibles avec les navigateurs, mais qui ont des implications vraiment intéressantes pour les mises en page et le responsive design d'interface utilisateur. Dans cette démonstration, vous définissez la largeur à l'aide d'une pince comme ceci: width: clamp(<min>, <actual>, <max>).
Ce champ définit une taille minimale et maximale absolue, ainsi qu'une taille réelle. Avec des valeurs, cela peut se présenter comme suit:
.parent {
width: clamp(23ch, 60%, 46ch);
}
La taille minimale est ici de 23ch ou 23 unités de caractères et la taille maximale est de 46ch, soit 46 caractères. Les unités de largeur de caractères sont basées sur la taille de police de l'élément (plus précisément, la largeur du glyphe 0). La taille "réelle" est de 50%, soit 50% de la largeur du parent de cet élément.
La fonction clamp() permet à 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). Comme vous pouvez le voir, à mesure que j'étire et réduit la taille du parent, la largeur de cette carte augmente jusqu'à son point maximal fixé au maximum et diminue jusqu'à sa valeur minimale. Elle reste ensuite centrée dans le parent, car nous avons appliqué des propriétés supplémentaires pour la centrer. Cela améliore la lisibilité des mises en page, car le texte ne sera ni trop large (au-dessus de 46ch), ni trop écrasé et étroit (moins de 23ch).
C’est également un excellent moyen d’implémenter une typographie réactive. Par exemple, vous pouvez écrire: font-size: clamp(1.5rem, 20vw, 3rem). Dans ce cas, la taille de police d'un titre reste toujours limitée entre 1.5rem et 3rem, mais augmente ou diminue en fonction de la valeur réelle 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. Toutefois, n'oubliez pas qu'elle n'est pas compatible avec tous les navigateurs récents. Assurez-vous donc d'utiliser des créations de remplacement et effectuez vos tests.
10. Respect de l'aspect: aspect-ratio: <width> / <height>
Enfin, ce dernier outil de mise en page est le plus expérimental du groupe. Elle a été récemment introduite dans Chrome Canary dans Chromium 84, et Firefox met tout en œuvre pour l'implémenter. Toutefois, elle n'est actuellement disponible dans aucune édition de navigateur stable.
Je tiens toutefois à vous en parler, car il s'agit d'un problème très courant. Il s'agit simplement de conserver les proportions de l'image.
Avec la propriété aspect-ratio, lorsque je redimensionne la fiche, le bloc visuel vert conserve ce format de 16 x 9. Nous respectons le format avec aspect-ratio: 16 / 9.
.video {
aspect-ratio: 16 / 9;
}
Pour conserver un format 16x9 sans cette propriété, vous devez utiliser un hack padding-top et lui attribuer une marge intérieure de 56.25% afin de définir un ratio haut/largeur. Nous disposerons bientôt d'une propriété pour éviter le piratage et de la nécessité de calculer le pourcentage. Vous pouvez créer un carré avec un ratio 1 / 1, un ratio de 2:1 avec 2 / 1 et tout ce dont vous avez besoin pour que cette image soit mise à l'échelle avec un rapport de taille défini.
.square {
aspect-ratio: 1 / 1;
}
Bien que cette fonctionnalité soit encore en cours de développement, il est intéressant de le connaître, car elle résout de nombreux problèmes de développements auxquels j'ai été confrontés moi-même, notamment en ce qui concerne les vidéos et les iFrames.
Conclusion
Merci d'avoir suivi cette aventure à travers 10 lignes de code CSS performantes. Pour en savoir plus, regardez la vidéo complète et essayez vous-même les démonstrations.