Convertisseur d'unités CSS

Ce que fait le Convertisseur d'unités CSS

Le Convertisseur d'unités CSS traduit des valeurs entre px, rem, em et pt avec des tailles de base configurables. Il est utile pour intégrer un design token en CSS, vérifier des échelles typographiques, convertir une ancienne feuille de style, comparer des valeurs en points orientées impression ou décider si un composant doit utiliser des tailles relatives à la racine ou à l'élément. Saisissez une valeur source, choisissez son unité, réglez les tailles de police de la racine et de l'élément, et les valeurs équivalentes se mettent à jour immédiatement. Le convertisseur traite rem comme relatif à la taille de police de la racine et em comme relatif à la taille de police de l'élément courant.

La conversion entre pixels et points utilise la relation CSS selon laquelle un point vaut un pixel et un tiers, donc un pixel égale 0,75 point. Afficher tous les équivalents en même temps permet de repérer plus facilement si un token d'espacement ou de taille de police est cohérent avec le reste d'une échelle. Le bouton de copie crée un résumé compact sur plusieurs lignes pour des notes, des pull requests ou des revues de tokens.

Un flux de travail privé dans le navigateur

Tout le traitement s'effectue dans votre navigateur avec du JavaScript côté client. L'outil n'envoie à aucun serveur les extraits, valeurs de configuration, données générées, textes de requêtes ou exemples copiés, et ne demande aucun compte. Ce modèle exclusivement local compte pour les utilitaires de développement, car ce qu'on y colle ressemble souvent à de vraies données d'application : réponses d'API, journaux, exemples proches de variables d'environnement, requêtes de base de données, balisage de brouillons ou valeurs copiées lors de sessions de débogage en production. Garder la transformation en local réduit le risque et garde l'interaction rapide, car il n'y a aucun aller-retour réseau.

L'interface est volontairement compacte pour que vous puissiez coller l'entrée, ajuster les options, inspecter la sortie, la copier et retourner à votre éditeur. Les résultats doivent toutefois être relus avant d'être commités, partagés publiquement ou utilisés dans un flux de production. Les outils de navigateur sont excellents pour une inspection et une préparation rapides, mais ils ne peuvent pas connaître chaque convention de projet, règle de classification des données ou exigence de validation propre à une application.

Conseils pratiques

Utilisez rem pour les valeurs qui doivent suivre la racine du document, comme les tailles de police accessibles et les espacements de mise en page liés aux préférences de l'utilisateur. Utilisez em lorsqu'une valeur doit évoluer avec la taille de police du composant lui-même, par exemple pour l'alignement d'icônes, le remplissage local ou la typographie imbriquée. Utilisez px avec prudence pour des bordures exactes, des ressources matricielles et les cas où une mise à l'échelle relative n'est pas souhaitée. Les tailles calculées réelles peuvent être influencées par les réglages du navigateur, l'héritage, le zoom, les media queries et les styles propres au conteneur : vérifiez donc les valeurs importantes dans les outils de développement.