Online Tool Store
Extracteur de Variables CSS
Collez du CSS et extrayez chaque variable : redéfinitions en conflit, variables inutilisées ou indéfinies détectées. Export en :root, JSON ou liste var().
🔒 Cet outil fonctionne entièrement dans votre navigateur. Vos fichiers ne sont jamais envoyés sur un serveur.
Outil navigateur
Extracteur de Variables CSS
Comment ça marche
- Commencez avec l'exemple déjà chargé, ou collez votre propre CSS.
- Consultez le résumé — chaque variable trouvée, toute redéfinition avec des valeurs contradictoires, et les variables inutilisées ou indéfinies.
- Vérifiez le tableau complet avec le sélecteur, la valeur et le type déduit (couleur, longueur, police, etc.) de chaque variable.
- Choisissez un format d'export — un bloc :root propre, du JSON ou une liste var() — puis copiez ou téléchargez-le.
FAQ
Est-ce que ça fonctionne dans mon navigateur ?
Oui. Votre CSS est analysé localement dans la page — rien n'est envoyé, et il n'y a pas de compte.
Qu'est-ce qu'une variable redéfinie ?
Une propriété personnalisée déclarée plusieurs fois avec des valeurs différentes — le plus souvent une valeur par défaut dans :root plus une surcharge sous une media query mode sombre ou une classe de thème. Chaque occurrence est affichée avec son sélecteur et son numéro de ligne pour que vous voyiez exactement où les valeurs divergent, plutôt que de ne garder silencieusement que la première.
Que signifient « inutilisée » ou « indéfinie » ici ?
Inutilisée signifie qu'une variable est déclarée avec -- mais jamais référencée via var(). Indéfinie, c'est l'inverse — quelque chose appelle var(--nom) mais --nom n'est jamais déclarée dans le CSS collé. Les deux sont des restes courants après une refactorisation, et les références indéfinies sont celles qu'il vaut vraiment la peine de corriger, car le navigateur revient silencieusement à la valeur initiale de la propriété.
Le CSS à l'intérieur de @media ou d'autres blocs imbriqués est-il pris en charge ?
Oui. Un bloc :root imbriqué dans @media (prefers-color-scheme: dark) ou une règle @ similaire est correctement attribué à :root, et non au conteneur @media.
Puis-je utiliser les données d'exemple ?
Oui. Le widget se charge avec un exemple qui inclut volontairement une redéfinition en mode sombre, une variable inutilisée et une référence indéfinie, afin que vous voyiez les trois vérifications à l'œuvre avant de coller votre propre CSS.
Quels formats d'export sont disponibles ?
Un bloc :root {} propre, une table de jetons JSON plate, ou une simple liste de références var(--nom) — copiez ou téléchargez celui qui correspond à votre destination.
Dans quel format dois-je coller mon CSS ?
Collez vos propriétés personnalisées CSS une déclaration par ligne, comme elles apparaîtraient dans un bloc :root, par exemple `--brand: #0f766e;`. Chaque ligne devient une rangée dans la liste extraite.
Y a-t-il une limite à la quantité de CSS que je peux coller ?
Aucune limite fixe — tout s'exécute localement dans votre navigateur, donc la vitesse d'extraction ne dépend que de votre appareil, pas d'un serveur.
Comparaison
| Fonctionnalité | Online Tool Store | HTMLToolz CSS Variables Extractor | HexaTools CSS Variable Extractor |
|---|---|---|---|
| Trouve les variables sous n'importe quel sélecteur, pas seulement :root | ✓ | ✓ | Seul :root est vérifié |
| Signale les redéfinitions contradictoires en montrant chaque occurrence | ✓ | Non affiché | Garde silencieusement seulement la première — surcharge manquante non détectée |
| Signale les variables inutilisées et les références var() indéfinies | ✓ | Non affiché | Non affiché, malgré une prétendue vérification d'usage |
| :root imbriqué dans @media résolu vers le vrai sélecteur | ✓ | Non applicable — sortie :root unique | Non affiché |
| Export en bloc :root, JSON ou liste var() | ✓ | ✓ | Liste simple uniquement |
Tout fichier CSS réel qui mérite un audit a une surcharge de mode sombre ou un jeton inutilisé oublié — exactement le cas qu'un extracteur ne comparant que les noms rate, et là où celui-ci a été testé directement contre eux.