Chargement...
Référence complète des unités CSS
Ce guide fournit une référence complète des unités CSS, destinée à aider les développeurs à créer des mises en page précises, des typographies cohérentes et des designs responsifs. Les développeurs peuvent l’utiliser pour identifier rapidement les unités adaptées à chaque contexte et les appliquer dans des projets réels. Le guide couvre toutes les catégories d’unités CSS : unités de longueur absolue, unités relatives, unités de viewport, unités de requêtes de conteneur, pourcentages, angles, temps, fréquences, résolutions, couleurs, fonctions et unités de grille. Chaque catégorie est organisée pour un accès rapide et des exemples pratiques sont fournis pour faciliter l’implémentation dans des sites web modernes.
📊 Unités de longueur absolue
| Unit | Description | Conversion | Example | Use Cases | Browser Support |
|---|---|---|---|---|---|
| px | Pixels - pixels de l’appareil | 1px = 1/96 inch | width: 300px | Mises en page écran, bordures, ombres | Tous navigateurs |
| cm | Centimètres | 1cm = 37.8px | margin: 2cm | Feuilles de style imprimables, mesures physiques | Tous navigateurs |
| mm | Millimètres | 1mm = 3.78px | border: 1mm solid | Impression, mesures précises | Tous navigateurs |
| in | Pouces | 1in = 96px | page-break-after: 2in | Mises en page imprimées, grandes mesures | Tous navigateurs |
| pt | Points | 1pt = 1.33px | font-size: 12pt | Typographie, impression | Tous navigateurs |
| pc | Picas | 1pc = 16px | line-height: 1.5pc | Typographie imprimée, largeurs de colonne | Tous navigateurs |
| Q | Quart de millimètre | 1Q = 0.25mm | margin: 4Q | Impression très précise | Navigateurs modernes |
📊 Unités de longueur relative
| Unit | Description | Relative To | Example | Use Cases | Browser Support |
|---|---|---|---|---|---|
| em | Unité em | Taille de la police de l’élément parent | font-size: 1.2em | Typographie, espacements relatifs | Tous navigateurs |
| rem | Em racine | Taille de la police de l’élément racine | margin: 2rem | Espacements cohérents, layouts évolutifs | IE9+ |
| ex | Hauteur x | Hauteur du « x » minuscule de la police | line-height: 2ex | Typographie, alignement vertical | Tous navigateurs |
| ch | Largeur caractère | Largeur du caractère '0' de la police | width: 40ch | Conteneurs texte, monospaces | IE9+ |
| cap | Hauteur capitale | Hauteur des lettres capitales | margin-top: 1cap | Typographie, espacements verticaux | Navigateurs modernes |
| ic | Caractère idéographique | Largeur des caractères CJK | width: 20ic | Typographie asiatique | Navigateurs modernes |
| lh | Hauteur de ligne | Hauteur de ligne de l’élément | margin: 1lh | Rythme vertical, espacements | Navigateurs modernes |
| rlh | Hauteur ligne racine | Hauteur de ligne de l’élément racine | padding: 0.5rlh | Espacement vertical cohérent | Navigateurs modernes |
📊 Unités de viewport
| Unit | Description | Calculation | Example | Use Cases | Browser Support |
|---|---|---|---|---|---|
| vw | Largeur viewport | 1% de la largeur du viewport | width: 50vw | Layouts pleine largeur, design responsif | IE9+ |
| vh | Hauteur viewport | 1% de la hauteur du viewport | height: 100vh | Sections pleine hauteur, zones hero | IE9+ |
| vmin | Viewport minimum | 1% de la plus petite dimension | font-size: 4vmin | Éléments carrés, typographie responsive | IE9+ |
| vmax | Viewport maximum | 1% de la plus grande dimension | width: 50vmax | Layouts adaptatifs | IE9+ |
| vi | Viewport inline | 1% du viewport dans la direction inline | padding: 2vi | Propriétés logiques, layouts internationaux | Navigateurs modernes |
| vb | Viewport block | 1% du viewport dans la direction block | margin: 3vb | Propriétés logiques, modes d’écriture | Navigateurs modernes |
| dvw | Largeur viewport dynamique | 1% de la largeur dynamique | width: 100dvw | Layouts mobiles, gestion de la barre d’adresse | Navigateurs modernes |
| dvh | Hauteur viewport dynamique | 1% de la hauteur dynamique | height: 100dvh | UI mobile pleine hauteur | Navigateurs modernes |
| lvw | Large viewport width | 1% largeur du grand viewport | max-width: 90lvw | Layouts mobiles, UI affichée | Navigateurs modernes |
| lvh | Large viewport height | 1% hauteur du grand viewport | min-height: 100lvh | Layouts mobiles, viewport maximum | Navigateurs modernes |
| svw | Small viewport width | 1% largeur du petit viewport | width: 100svw | Layouts mobiles, UI masquée | Navigateurs modernes |
| svh | Small viewport height | 1% hauteur du petit viewport | height: 100svh | Layouts mobiles, viewport minimum | Navigateurs modernes |
📊 Unités de requête de conteneur
| Unit | Description | Calculation | Example | Use Cases | Browser Support |
|---|---|---|---|---|---|
| cqw | Largeur conteneur | 1% de la largeur du conteneur | width: 50cqw | Design responsive basé sur conteneur | Navigateurs modernes |
| cqh | Hauteur conteneur | 1% de la hauteur du conteneur | height: 80cqh | Layouts basés sur conteneur | Navigateurs modernes |
| cqi | Conteneur inline | 1% de la taille inline du conteneur | padding: 2cqi | Layouts logiques de conteneur | Navigateurs modernes |
| cqb | Conteneur block | 1% de la taille block du conteneur | margin: 1cqb | Dimensionnement en direction block | Navigateurs modernes |
| cqmin | Conteneur min | 1% de la plus petite dimension du conteneur | font-size: 3cqmin | Typographie responsive | Navigateurs modernes |
| cqmax | Conteneur max | 1% de la plus grande dimension du conteneur | border-radius: 2cqmax | Styling basé sur conteneur | Navigateurs modernes |
📊 Pourcentages
| Unit | Description | Relative To | Example | Use Cases | Browser Support |
|---|---|---|---|---|---|
| % | Pourcentage | Propriété correspondante de l’élément parent | width: 50% | Layouts flexibles, responsif | Tous navigateurs |
📊 Angles
| Unit | Description | Conversion | Example | Use Cases | Browser Support |
|---|---|---|---|---|---|
| deg | Degrés | 360deg = cercle complet | transform: rotate(45deg) | Rotations, gradients | Tous navigateurs |
| grad | Gradians | 400grad = cercle complet | transform: rotate(100grad) | Calculs mathématiques, gradients | Tous navigateurs |
| rad | Radians | 2π rad = cercle complet | transform: rotate(1.57rad) | Transformations mathématiques | Tous navigateurs |
| turn | Tours | 1turn = cercle complet | transform: rotate(0.25turn) | Rotations intuitives, animations | IE9+ |
📊 Temps
| Unit | Description | Conversion | Example | Use Cases | Browser Support |
|---|---|---|---|---|---|
| s | Secondes | 1s = 1000ms | transition-duration: 2s | Animations, transitions | Tous navigateurs |
| ms | Millisecondes | 1000ms = 1s | animation-delay: 500ms | Timing précis, animations rapides | Tous navigateurs |
📊 Fréquences
| Unit | Description | Conversion | Example | Use Cases | Browser Support |
|---|---|---|---|---|---|
| Hz | Hertz | 1Hz = 1 cycle/sec | Non utilisé couramment en CSS | Propriétés audio (futur) | Support limité |
| kHz | Kilohertz | 1kHz = 1000Hz | Non utilisé couramment en CSS | Propriétés audio (futur) | Support limité |
📊 Résolution
| Unit | Description | Definition | Example | Use Cases | Browser Support |
|---|---|---|---|---|---|
| dpi | Points par pouce | Points physiques par pouce | @media (min-resolution: 300dpi) | Écrans haute DPI, impression | IE9+ |
| dpcm | Points par cm | Points physiques par cm | @media (min-resolution: 118dpcm) | Mesures métriques, impression | IE9+ |
| dppx | Points par pixel CSS | Pixels par pixel CSS | @media (min-resolution: 2dppx) | Écrans Retina | IE9+ |
| x | Alias dppx | Même valeur que dppx | @media (min-resolution: 2x) | Écrans Retina | Navigateurs modernes |
📊 Couleurs
| Unit | Description | Format | Example | Use Cases | Browser Support |
|---|---|---|---|---|---|
| \# | Hexadécimal | #RRGGBB ou #RGB | color: #ff0000 | Notation couleur standard | Tous navigateurs |
| rgb() | RGB | rgb(r, g, b) | color: rgb(255, 0, 0) | Contrôle précis de la couleur | Tous navigateurs |
| rgba() | RGB avec alpha | rgba(r, g, b, a) | background: rgba(255, 0, 0, 0.5) | Couleurs transparentes | IE9+ |
| hsl() | HSL | hsl(h, s%, l%) | color: hsl(0, 100%, 50%) | Sélection couleur intuitive | IE9+ |
| hsla() | HSL avec alpha | hsla(h, s%, l%, a) | background: hsla(0, 100%, 50%, 0.5) | Couleurs transparentes | IE9+ |
| hwb() | HWB | hwb(h w% b%) | color: hwb(0 0% 0%) | Modèle alternatif | Navigateurs modernes |
| lab() | Lab | lab(l a b) | color: lab(50% 20 -30) | Espace perceptuel | Navigateurs modernes |
| lch() | LCH | lch(l c h) | color: lch(50% 40 180) | Lab cylindrique | Navigateurs modernes |
| oklab() | OKLab | oklab(l a b) | color: oklab(0.5 0.2 -0.3) | Espace Lab amélioré | Navigateurs modernes |
| oklch() | OKLCH | oklch(l c h) | color: oklch(0.5 0.4 180) | LCH amélioré | Navigateurs modernes |
| color() | Color function | color(space r g b) | color: color(display-p3 1 0 0) | Espaces couleurs large gamut | Navigateurs modernes |
📊 Fonctions
| Unit | Description | Calculation | Example | Use Cases | Browser Support |
|---|---|---|---|---|---|
| calc() | Calcul mathématique | Combine différentes unités | width: calc(100% - 20px) | Calculs mixtes | IE9+ |
| min() | Valeur minimale | Renvoie la plus petite valeur | width: min(100px, 50%) | Contraintes responsives | Navigateurs modernes |
| max() | Valeur maximale | Renvoie la plus grande valeur | width: max(200px, 50%) | Minimums responsifs | Navigateurs modernes |
| clamp() | Valeur limitée | clamp(min, preferred, max) | font-size: clamp(1rem, 4vw, 2rem) | Responsive avec limites | Navigateurs modernes |
| attr() | Valeur d’attribut | Utilise valeur HTML | width: attr(data-width px) | Valeurs dynamiques | Support limité |
| var() | Variable CSS | Utilise propriété personnalisée | color: var(--main-color) | Propriétés CSS custom | IE11+ partiel, navigateurs modernes |
📊 Unités de grille
| Unit | Description | Definition | Example | Use Cases | Browser Support |
|---|---|---|---|---|---|
| fr | Fraction | Fraction de l’espace disponible | grid-template-columns: 1fr 2fr | Grille CSS, colonnes flexibles | IE10+ (-ms-) |
Exemples rapides
css
CSS Code
/* Mélange unités absolues et relatives */
.container {
width: calc(100vw - 2rem);
max-width: 1200px;
padding: 1em 5%;
}
/* Typographie responsive avec clamp */
.heading {
font-size: clamp(1.5rem, 4vw, 3rem);
line-height: 1.2;
margin-bottom: 1em;
}
/* Unités viewport pour layouts plein écran */
.hero {
height: 100vh;
width: 100vw;
display: flex;
align-items: center;
}
/* Unités de requêtes conteneur pour composants */
.card {
width: 100cqw;
padding: 2cqi;
font-size: clamp(0.875rem, 3cqw, 1.25rem);
}
/* CSS Grid avec unités fractionnelles */
.grid-layout {
display: grid;
grid-template-columns:
200px 1fr 2fr;
gap: 1rem;
}Privilégiez les unités relatives (rem, em, %) pour des designs évolutifs et accessibles. Utilisez rem plutôt qu’em pour une cohérence de l’espacement global. Faites attention aux unités viewport (vw, vh), car elles ignorent les barres de défilement. Utilisez clamp() pour une typographie responsive fluide. Combinez les unités avec calc() pour des layouts complexes. Les px restent adaptés aux bordures et ombres. Testez les unités de requêtes conteneur dans les navigateurs supportés avant mise en production. Les unités fr dans CSS Grid offrent des layouts flexibles. Vérifiez le support des nouvelles unités comme dvh, lvh, svh. Les unités logiques (vi, vb) sont utiles pour l’internationalisation. Préférez HSL pour manipuler les couleurs et les thèmes. Fournissez toujours des alternatives pour les navigateurs anciens. Testez différentes combinaisons d’unités sur plusieurs écrans et appareils.
🧠 Testez Vos Connaissances
Prêt à Commencer
Vérification des connaissances
Testez vos connaissances sur les unités CSS et leur utilisation.
3
Questions
70%
Pour Réussir
∞
Temps
∞
Tentatives
📝 Instructions
- Lisez chaque question attentivement
- Sélectionnez la meilleure réponse pour chaque question
- Vous pouvez refaire le quiz autant de fois que vous le souhaitez
- Votre progression sera affichée en haut