À propos de cet outil
Les propriétés personnalisées CSS — généralement appelées variables CSS — permettent de définir une valeur une seule fois, comme une couleur de marque, une unité d’espacement ou une police, et de la réutiliser partout avec var(--nom). Centraliser les valeurs répétées signifie qu’une seule modification au niveau :root se propage dans toute la feuille de style au lieu de chercher-remplacer dans des dizaines de fichiers ; et comme les propriétés personnalisées sont des valeurs DOM vivantes, JavaScript ou une media query peuvent les lire et les réécrire à l’exécution — permettant des changements de thème instantanés, un mode sombre, ou des espacements ajustables par l’utilisateur sans toucher au CSS.
Saisissez un nom et une valeur pour chaque ligne ci-dessous ; cet outil nettoie automatiquement chaque nom, en supprimant un « -- » initial redondant et en remplaçant les caractères invalides par des tirets, si bien qu’une faute de frappe comme un préfixe oublié ou un espace superflu ne casse jamais le bloc généré. Copiez le résultat :root { ... } directement dans votre feuille de style, ou téléchargez-le en tant que fichier .css à part pour un @import où vous en avez besoin. Tout se passe localement dans votre navigateur pendant que vous tapez ; rien n’est envoyé.
Questions fréquentes
Cela envoie-t-il mes valeurs quelque part ?
Non. Tout s'exécute localement dans votre navigateur — vos paires nom/valeur ne quittent jamais votre appareil.
Puis-je limiter les variables à un sélecteur spécifique au lieu de :root ?
Oui — définissez un sélecteur personnalisé et le bloc CSS généré l'utilisera à la place de :root.