En tant que langage de style utilisé pour définir l’apparence et la mise en page des pages web, le CSS offre une large variété d’unités pour spécifier les dimensions, les marges, les polices et d’autres propriétés visuelles. Comprendre les différentes unités en CSS est essentiel pour créer des designs flexibles, adaptatifs et esthétiques. Dans cet article, nous explorerons en profondeur les différentes unités en CSS, en expliquant leurs utilisations, leurs avantages et leurs meilleures pratiques.
Les unités CSS de longueurs
Les unités de longueur sont utilisées pour définir les dimensions d’un élément, telles que la largeur, la hauteur, les marges, etc…
Les pixels ou px
Les pixels sont l’unité de longueur la plus couramment utilisée en CSS. Un pixel est une unité de mesure fixe qui correspond à un point sur l’écran. L’utilisation de pixels est simple et précise, ce qui les rend populaires pour définir des dimensions statiques.
.element {
width: 200px; /* Définit la largeur de l'élément à 200 pixels */
height: 100px; /* Définit la hauteur de l'élément à 100 pixels */
}
Les pixels offrent un contrôle précis sur les dimensions des éléments et ils sont largement pris en charge par tous les navigateurs.
Le principal inconvénient de l’unité pixel réside dans le manque de souplesse. Les dimensions en pixels ne s’adaptent pas aux différentes tailles d’écran, ce qui peut entraîner des problèmes d’accessibilité sur les appareils mobiles.
L’unité em
L’unité em est relative à la taille de la police de l’élément parent. Un em équivaut à la taille de la police de l’élément parent. Par conséquent, si la taille de la police de l’élément parent est de 16 pixels, 1em sera égal à 16 pixels.
.element {
font-size: 1.2em; /* La taille de la police de l'élément est 1.2 fois la taille de la police de l'élément parent */
}
Les avantages de l’unité em sont la flexibilité et l’accessibilité. Les dimensions en em s’adaptent automatiquement aux changements de taille de police, ce qui les rend utiles pour les mises en page dynamiques et réactives. Elles permettent également aux utilisateurs de zoomer facilement sur le texte sans compromettre la mise en page.
En revanche, calculer les dimensions en em peut être plus complexe que d’utiliser des px, en particulier dans les mises en page complexes avec des structures d’arborescence profondes.
L’unité rem (root em)
L’unité rem est similaire à em, mais elle est relative à la taille de la police de l’élément racine (généralement <html>). Cela garantit une cohérence dans toute la mise en page, car la taille de police de l’élément racine reste constante.
.element {
font-size: 1.5rem; /* La taille de la police de l'élément est 1.5 fois la taille de la police de l'élément racine */
}
Les dimensions en rem restent constantes par rapport à la taille de la police de l’élément racine, offrant ainsi une cohérence dans toute la mise en page. Elles simplifient la gestion des tailles de police et des dimensions des éléments dans une mise en page complexe.
Cependant, les dimensions en rem peuvent ne pas convenir à toutes les situations, en particulier lorsque des dimensions doivent être spécifiées en fonction de la taille de police de l’élément parent.
L’unité pourcentage (%)
Les pourcentages sont utilisés pour définir des dimensions relatives à la taille de l’élément parent. Par exemple, une largeur de 50% signifie que l’élément occupera la moitié de la largeur de son parent.
.element {
width: 50%; /* La largeur de l'élément est égale à 50% de la largeur de son parent */
}
L’unité % offre une très grande flexibilité : Les dimensions en pourcentage s’adaptent automatiquement aux changements de taille de l’élément parent, ce qui les rend utiles pour les mises en page responsives. Elles permettent aux éléments de s’adapter à différentes tailles d’écran et à différentes résolutions.
Mais attention, les dimensions en pourcentage peuvent parfois poser des problèmes de compatibilité, en particulier dans les mises en page complexes avec des structures d’arborescence profondes. Les calculs de dimensions en pourcentage peuvent aussi devenir complexes dans les mises en page imbriquées, ce qui rend parfois difficile la gestion de la mise en page.
En comprenant les avantages et les inconvénients de chaque unité de longueur en CSS, les développeurs peuvent choisir judicieusement celle qui convient le mieux à chaque situation pour créer des mises en page flexibles, réactives et esthétiques. L’utilisation idoine de ces unités contribue à garantir une expérience utilisateur optimale sur une variété de périphériques et de tailles d’écran.
L’unité flexible : fraction (fr)
Flexbox et l’unité fr
Lorsque l’unité fr en CSS s’utilise avec Flexbox, cela permet de créer des mises en page réactives et dynamiques. L’unité fr représente une fraction de l’espace disponible à l’intérieur du conteneur flex, où fr signifie fraction. Cette unité est largement utilisée pour définir des proportions flexibles des éléments enfants à l’intérieur de leur conteneur, offrant ainsi un moyen puissant de créer des mises en page flexibles et réactives.
Répartition équitable de l’espace : Lorsque vous spécifiez des dimensions en fractions, le navigateur distribue l’espace disponible à l’intérieur du conteneur flex en fonction de ces fractions. Par exemple, si un conteneur flex a trois éléments enfants avec des fractions définies comme 1fr, 2fr et 1fr respectivement, le navigateur allouera l’espace disponible de manière à ce que le deuxième élément occupe deux fois plus d’espace que les autres.
L’unité fr permet de définir des proportions flexibles des éléments enfants par rapport à l’espace disponible. Cela permet de créer des mises en page dynamiques où les éléments s’adaptent automatiquement à différentes tailles d’écran et à différents contenus sans avoir besoin de dimensions fixes tout en gardant des proportions identiques.
L’unité CSS fr est largement prise en charge par les navigateurs modernes, ce qui en fait un outil puissant pour créer des mises en page flexibles et réactives sans dépendre de solutions de contournement ou de hacks CSS.
Grid et l’unité fr
L’unité fr fonctionne de manière similaire dans Grid que dans Flexbox, offrant ainsi une flexibilité accrue pour définir des proportions flexibles des éléments à l’intérieur de leur grille.
Lorsque vous utilisez Grid, vous pouvez définir des colonnes et des lignes flexibles en utilisant l’unité fr. Par exemple, si vous avez une grille avec trois colonnes et que vous voulez que la première et la troisième colonne aient une largeur fixe et que la deuxième colonne occupe le reste de l’espace disponible, vous pouvez utiliser 1fr pour la deuxième colonne :
.container {
display: grid;
grid-template-columns: 100px 1fr 100px;
/* La deuxième colonne occupe le reste de l'espace disponible */
}
L’unité fr peut être utilisée pour créer des grilles flexibles où les éléments s’adaptent dynamiquement à la taille de la grille. Vous pouvez spécifier différentes proportions pour les colonnes et les lignes en utilisant l’unité de fractions :
.container {
display: grid;
grid-template-columns: 1fr 2fr 1fr; /* Trois colonnes avec des proportions flexibles */
grid-template-rows: 1fr 2fr 1fr; /* Trois lignes avec des proportions flexibles */
}
Que vous utilisiez Flexbox ou Grid dépendra des besoins spécifiques de votre mise en page, mais dans les deux cas, l’unité fr offre une flexibilité considérable pour définir des proportions flexibles des éléments à l’intérieur de leur conteneur.
Les unités de temps
Les unités de temps sont utilisées pour spécifier les durées des animations, des transitions et d’autres effets temporels dans les feuilles de style CSS. Les comprendre est crucial pour contrôler le timing et le rythme des animations sur les pages web.
L’unité seconde (s)
L’unité s est utilisée pour spécifier les durées en secondes. C’est l’unité de temps la plus couramment utilisée en CSS pour définir des transitions et des animations
.element {
transition-duration: 0.5s; /* Définit une transition d'une durée de 0.5 seconde */
}
Les durées en secondes offrent un contrôle précis sur la vitesse des animations et des transitions. Elles sont largement prises en charge par tous les navigateurs.
En revanche, les durées en secondes peuvent parfois sembler trop rigides pour des effets d’animation plus complexes ou pour des interactions plus fluides.
L’unité millisecondes (ms)
L’unité ms est utilisée pour spécifier les durées en millisecondes. Elle est souvent utilisée pour des animations plus précises ou pour des effets qui nécessitent une réactivité instantanée.
.element {
transition-duration: 300ms; /* Définit une transition d'une durée de 300 millisecondes */
}
Les durées en millisecondes offrent une granularité très fine pour contrôler le timing des animations et des transitions. Elles permettent des réponses instantanées aux interactions de l’utilisateur.
Les durées en millisecondes peuvent nécessiter des calculs plus précis et une attention particulière pour maintenir la cohérence et la fluidité des animations.
Les délais négatifs
En plus des durées positives, CSS permet également l’utilisation de délais négatifs pour décaler le début des animations ou des transitions vers le passé. Cela peut être utile pour créer des effets de défilement ou d’apparition différée.
.element {
transition-delay: -0.2s; /* Décale le début de la transition de 0.2 seconde vers le passé */
}
Les délais négatifs offrent une flexibilité supplémentaire pour créer des effets d’animation complexes et des interactions dynamiques. Par contre, ils peuvent rendre les animations plus difficiles à comprendre et à gérer, surtout lorsqu’ils sont combinés avec d’autres paramètres de timing.
Les unités de viewport
Les unités vw (viewport width) et vh (viewport height)
Ces unités spécifient respectivement la largeur vw et la hauteur vh du viewport. Elles sont utiles pour créer des mises en page responsives qui s’adaptent à la taille de l’écran du périphérique.
.element {
width: 50vw; /* La largeur est équivalente à 50% de la largeur du viewport */
height: 80vh; /* La hauteur est équivalente à 80% de la hauteur du viewport */
}
Les unités vmin et vmax
Ces unités spécifient respectivement la plus petite vmin ou la plus grande max dimension du viewport. Elles sont souvent utilisées dans les mises en page responsives pour garantir que les éléments s’adaptent de manière appropriée à la taille de l’écran.
.element {
width: 50vmin; /* La largeur est équivalente à 50% de la plus petite dimension du viewport */
height: 70vmax; /* La hauteur est équivalente à 70% de la plus grande dimension du viewport */
}
Bien que moins couramment utilisées que les unités de longueur telles que px ou em, ces unités offrent une flexibilité supplémentaire dans la conception des mises en page CSS.
Les autres unités
L’unité ex
L’unité ex est équivalente à la hauteur de la lettre x dans la police en cours. Elle est parfois utilisée pour spécifier des dimensions relatives à la taille de la police.
.element {
font-size: 16px;
height: 2ex; /* La hauteur est équivalente à deux fois la hauteur de la lettre "x" */
}
L’unité ch
L’unité ch est équivalente à la largeur d’un caractère 0 (zéro) dans la police en cours. Elle peut être utilisée pour spécifier des dimensions basées sur la largeur d’un caractère spécifique.
.element {
font-size: 16px;
width: 10ch; /* La largeur est équivalente à dix fois la largeur du caractère "0" */
}
L’unité dpi ou unité de résolution
Les unités de résolution sont utilisées pour spécifier la densité des dispositifs d’affichage.
dpi (dots per inch), indique le nombre de pixels par pouce. Par exemple, le code ci-dessous appliquera les styles à une résolution d’impression minimale de 300 dpi :
@media print and (min-resolution: 300dpi) { ... }
