Parcourez chaque unité CSS — absolue (px, cm, pt), relative à la police (em, rem, ch), liée à la fenêtre (vw, dvh), aux container queries, à la grille (fr), aux angles, au temps et à la résolution — dans une référence consultable et filtrable par type, avec une description, une note « quand l'utiliser » et des jetons prêts à copier. Dans votre navigateur, gratuit.

Chaque unité CSS, expliquée. Tout s'exécute dans votre navigateur à partir d'une référence intégrée — rien n'est envoyé au serveur.

Aucune unité ne correspond à votre recherche.
Essayez une autre unité ou catégorie — par exemple rem, dvh, fr ou angle.

À propos de Référence des unités CSS

La Référence des Unités CSS documente chaque unité que propose le langage — 45 au total — organisées par type : unités absolues comme px, cm et pt ; unités relatives à la police comme em, rem, ch et lh ; unités de fenêtre d'affichage de vw et vh jusqu'aux plus récentes svh, lvh et dvh ; unités de requête de conteneur comme cqw et cqi ; l'unité de grille fr ; plus l'angle, le temps, la résolution et le pourcentage.

Chaque carte offre plus qu'une définition : le jeton de l'unité en police monospace copiable, son nom complet, sa catégorie, une description en langage clair de son mode de calcul, et une note pratique « quand l'utiliser » qui indique où l'unité trouve sa place — et où une autre convient mieux.

La recherche fait correspondre les jetons, les noms et les significations, ainsi rem, viewport width et root trouvent tous leurs unités, et des étiquettes de type filtrent la grille sur une seule famille. Tout fonctionne dans votre navigateur à partir d'une référence intégrée, sans rien envoyer à un serveur.

Comment utiliser Référence des unités CSS

  1. Recherchez une unité par jeton, nom ou signification — par exemple rem, viewport width ou angle.
  2. Utilisez les étiquettes de type pour filtrer la grille sur les unités absolues, relatives à la police, de fenêtre d'affichage, de conteneur, de grille, d'angle, de temps, de résolution ou de pourcentage.
  3. Lisez la description de chaque unité et sa note « quand l'utiliser » pour choisir la bonne.
  4. Cliquez sur le bouton de copie pour récupérer le jeton de l'unité pour votre feuille de style.

Questions fréquentes

Utilisez rem pour les tailles de police et tout ce qui devrait s'adapter à la taille de texte préférée de l'utilisateur — rem suit la taille de police racine, donc les réglages d'accessibilité du navigateur fonctionnent. Utilisez px pour ce qui doit rester optiquement constant, comme les bordures d'un pixel.

em est relative à la taille de police de l'élément actuel, les éléments imbriqués composent donc la valeur ; rem est toujours relative à l'élément racine, ce qui donne des résultats prévisibles. C'est pourquoi rem est devenu le choix par défaut pour les espacements et les échelles typographiques.

Les navigateurs mobiles affichent et masquent leurs barres d'outils, changeant la hauteur visible, tandis que vh reste fixé à la taille de mise en page la plus grande. L'unité dynamique dvh suit la hauteur visible réelle au fur et à mesure que les barres d'outils bougent, et svh/lvh se fixent aux états les plus petit et le plus grand.

fr distribue l'espace libre d'un conteneur de grille par fraction : grid-template-columns: 2fr 1fr donne à la première colonne deux fois la largeur restante de la seconde, une fois les pistes fixes et les espaces soustraits. Elle n'existe qu'au sein des définitions de pistes de grille.

Elles dimensionnent les éléments relativement à leur conteneur de requête le plus proche plutôt qu'à la fenêtre d'affichage : cqw vaut 1 % de la largeur du conteneur, cqi 1 % de sa taille en ligne. Elles permettent à un composant de s'adapter à la boîte dans laquelle il vit, indépendamment de la taille de l'écran.

Oui. Les 45 unités sont documentées gratuitement sur une page qui fonctionne entièrement dans votre navigateur — pas d'inscription, pas de requêtes vers le serveur.

Besoin d'aide ?
Un problème avec cet outil ? Signalez-le à notre équipe.
Signaler un problème

Ajoutez cet outil gratuit à votre propre site web — copiez-collez le code ci-dessous.