Le problème des pourcentages en CSS

Il n'y a pas si longtemps, nous dépendions entièrement de l'utilisation de pourcentages pour les largeurs et les hauteurs. L'utilisation de pourcentages signifiait que votre mise en page et vos éléments pouvaient assumer une hauteur et une largeur basées sur la fenêtre d'affichage. Mais comme le CSS moderne continue d'évoluer, nous sommes arrivés à un point où il pourrait même être judicieux d'éviter d'utiliser des pourcentages.

Découvrez les problèmes courants que vous rencontrerez lors de l'utilisation de pourcentages. Découvrez également les techniques CSS modernes à utiliser à la place des pourcentages. Ces techniques vous donneront le même résultat que les pourcentages sans aucun des inconvénients.

Un exemple de grille très simple

Pour illustrer un problème avec les unités de pourcentage, considérez cette mise en page HTML :

<divclasse="récipientma-grille">
 <divclasse="élément de grille">
div>
 <divclasse="élément de grille">
div>
div>

L'élément extérieur est une base div élément conteneur avec deux div enfants. Chaque enfant a un élément de grille classe. Pour transformer le conteneur en une grille à deux colonnes (deux cases), nous devrons appliquer le code CSS suivant :

corps {
Couleur de l'arrière plan: noir;
aligner les éléments: centre;
justifier-contenu: flex-start;
}
.ma-grille {
afficher: grille;
grille-modèle-colonnes: 50% 50%;
marge: 3rem;
frontière: 2pixelssolideor;
rembourrage: 1rem;
}
.grid-item {
frontière: 3pixelssolideor;
rembourrage: 10rem 0;
arrière-plan: bleu;
}

Ainsi, chaque colonne (élément de la grille) a une couleur de fond dorée. Sur la classe parent du conteneur, nous définissons grille-modèle-colonne à 50 % pour chaque colonne. Par conséquent, les deux boîtes occupent 50 % de la largeur totale de l'élément conteneur.

Voici le résultat :

Mais il y a des problèmes avec cet alignement. Tout d'abord, si vous décidez d'ajouter un écart au parent de la grille, l'enfant pourrait déborder du côté. Par exemple, si vous deviez ajouter écart: 3px au .ma-grille block dans le CSS, alors voici à quoi ressemblerait la mise en page :

Comme vous pouvez le voir sur l'image ci-dessus, la boîte de droite est sortie du conteneur. Parfois, vous ne le remarquerez peut-être pas car votre écart est suffisamment petit, ce qui entraîne un problème d'alignement étrange. Mais si vous aviez un écart plus grand, alors le chevauchement devient assez évident.

Chaque fois que vous utilisez des pourcentages et que vous ajoutez des marges ou des écarts, il y a de fortes chances que vous rencontriez ce genre d'erreurs. Mais pourquoi l'erreur se produit-elle ?

C'est parce que chaque colonne représente 50% du parent. Dans l'exemple ci-dessus, nous avons 50 % plus 50 % plus cet espace (3px), ce qui pousse la boîte hors du conteneur.

Notez que cette erreur ne se produit pas uniquement avec 50-50. Vous pouvez définir la première colonne à 75 %, la deuxième colonne à 25 % et l'erreur se produira toujours. C'est pourquoi vous devez utiliser la solution suivante plus souvent.

La solution avec des valeurs fractionnaires

La solution consiste à utiliser des valeurs fractionnaires au lieu de pourcentages. Ainsi, au lieu de définir la première colonne à 75 % et la seconde à 50 %, vous pouvez définir la première colonne sur 3fr et la deuxième colonne sur 1fr :

grille-modèle-colonnes: 3en 1en

Cela maintient le même rapport que le premier exemple. Mais l'avantage d'utiliser en unités est qu'ils utilisent une fraction de l'espace disponible. Dans ce cas, la première colonne occupera trois parties de l'espace tandis que la deuxième colonne en prendra une partie, sans compter l'espace.

Un autre avantage d'utiliser frs plutôt que des pourcentages ou d'autres unités absolues, comme px ou em— est que vous pouvez les combiner avec des valeurs fixes. Voici un exemple :

grille-modèle-colonnes: 1fr 10rem ;

Avec le code ci-dessus, vous obtiendrez une valeur fixe qui ne change jamais quelle que soit la taille de l'écran. En effet, la colonne de droite restera toujours à 10rem tandis que la colonne de gauche occupera l'espace restant (moins l'écart).

Parfois, vous pouvez vous en sortir en utilisant des pourcentages. Mais vous devez les utiliser de manière intelligente qui peut toujours s'adapter à la situation. Souvent, cela signifie les associer à un en valeur.

Un exemple plus réaliste

Imaginons que vous ayez une page qui comprend la zone de contenu principale et un aparté (pour les publications connexes). La zone de contenu principale occupe trois fractions de l'écran tandis que la zone de côté occupe l'espace restant moins l'espace :

.récipient {
largeur: 100%;
afficher: grille;
grille-modèle-colonnes: 3en 1en;
écart: 1.5rem;
}
.carte {
Couleur de l'arrière plan: #5A5A5A;
rembourrage: 10pixels;
marge inférieure: .5rem;
}

Voici le résultat :

En règle générale, vous déplacez la barre latérale (ou de côté) vers le bas (ou le haut) de la page une fois que l'écran devient trop étroit. Cela signifie configurer des requêtes multimédias qui empilent tout les uns sur les autres lorsque la fenêtre d'affichage atteint un certain point d'arrêt.

Voici comment vous pouvez tout empiler dans une colonne lorsque la fenêtre d'affichage atteint 55 em ou moins :

@médias(largeur maximale: 55em) {
.récipient {
afficher: fléchir;
flex-direction: colonne;
 }
}

Et le résultat ressemblera à ceci :

Maintenant, vous ne voulez pas que chaque carte s'étende sur toute la largeur de la fenêtre d'affichage. Les cartes doivent plutôt s'afficher côte à côte. La meilleure façon d'y parvenir est d'utiliser des grilles CSS. Mais au lieu de définir des valeurs de largeur fixes (comme 50%) pour la colonne de modèle de grille, utilisez le répéter() fonctionnent comme suit :

.sidebar-grid {
afficher: grille;
grille-modèle-colonnes: répéter(ajustement automatique, min max(25rem, 1en));
aligner le contenu: commencer;
écart: 2rem;
}

Ce CSS fixe une taille minimale de 25rem et une taille maximale de 1fr. Cette approche est bien meilleure que la définition de largeurs fixes car elle repose sur un dimensionnement intrinsèque. En d'autres termes, il permet au navigateur de comprendre les choses en fonction des paramètres disponibles.

Désormais, lorsque vous réduisez la fenêtre du navigateur à une largeur spécifique, la zone de la grille se réajuste automatiquement à deux zones par ligne.

Lorsque l'écran devient plus petit, il tombe à une case par ligne. Ainsi, le navigateur empile tout les uns sur les autres. Tout cela se produit lorsque vous redimensionnez la fenêtre. Vous pouvez utiliser une fonctionnalité de navigateur comme Chrome DevTools pour comprendre le fonctionnement de ce CSS, et comment le redimensionnement des fenêtres modifie la disposition.

La meilleure partie est que vous n'avez pas besoin d'une requête de conteneur ou de quoi que ce soit d'extraordinaire pour rendre l'élément réactif. Définissez simplement une grille et utilisez min max() pour définir des valeurs fractionnaires au lieu de tailles fixes.

En savoir plus sur la grille CSS

Si vous voulez être excellent avec CSS, vous devez avoir une connaissance approfondie des grilles CSS. Les grilles peuvent être assez puissantes lorsqu'elles sont bien utilisées. Vous pouvez réaliser presque toutes les mises en page que vous souhaitez en utilisant Grids. Cela en fait un outil indispensable en CSS.

Une chose à garder à l'esprit lors de l'utilisation des grilles CSS est de se concentrer sur la réactivité. Vous pouvez également utiliser l'approche fractionnaire pour éviter les cas de collisions entre éléments. N'oubliez pas de maîtriser les grilles CSS car le style de mise en page vous aidera énormément lors de la création de sites Web.