Analyseur de variables CSS
Analysez vos feuilles de style CSS pour extraire les déclarations de propriétés personnalisées, compter les références var() et repérer les variables inutilisées.
Exécuter l’outil
Cet outil en ligne inspecte votre code CSS afin d'analyser l'utilisation des propriétés personnalisées. Il extrait automatiquement chaque déclaration débutant par deux tirets et conserve la valeur associée après suppression des espaces superflus. En parallèle, l'analyseur recense tous les appels de fonction utilisant la syntaxe var() et comptabilise le nombre d'occurrences pour chaque nom de variable, y compris lorsque des valeurs de secours sont incluses dans les parenthèses. Grâce à cette comparaison méthodique, l'outil met en évidence les variables déclarées qui ne possèdent aucune référence dans le texte fourni. Vous obtenez un récapitulatif détaillé comprenant le total des déclarations trouvées, le nombre d'éléments inutilisés ainsi que la liste exhaustive de vos variables. Cet outil facilite l'audit de vos feuilles de style, le nettoyage des jetons de design obsolètes et le repérage rapide des incohérences de nommage avant la mise en production.
Mode d’emploi
- Collez votre code CSS dans la zone de texte prévue à cet effet.
- Lancez l'analyse pour traiter les déclarations et les références.
- Consultez la synthèse indiquant le volume total de variables et le décompte des éléments non référencés.
- Examinez le détail de chaque propriété personnalisée avec sa valeur nettoyée et son nombre d'utilisations.
Exemples
- Code d'entrée : :root { --primary-color: #0055ff; --spacing-base: 8px; --unused-gap: 16px; } .btn { background-color: var(--primary-color); padding: var(--spacing-base); } Résultat : 3 déclarations trouvées (--primary-color, --spacing-base, --unused-gap), 1 variable non référencée (--unused-gap), 1 référence pour --primary-color et 1 référence pour --spacing-base.
- Code d'entrée : .card { --card-bg: #ffffff; background: var(--card-bg); border: 1px solid var(--card-border, #cccccc); } Résultat : 1 déclaration extraite (--card-bg avec 1 référence), 0 déclaration non référencée, et 1 référence détectée vers --card-border avec valeur de secours.
FAQ
Comment l'outil repère-t-il les variables CSS ?
L'analyseur identifie les déclarations dont le nom commence par deux tirets (--), suivies de deux-points, d'une valeur et d'un point-virgule. Il recherche également les motifs var(--nom) dans l'ensemble du texte.
Les valeurs de secours dans var() sont-elles prises en compte ?
Oui, la référence est comptabilisée pour le nom de variable concerné, même si un paramètre de secours est précisé après une virgule dans l'appel var().
Que se passe-t-il si le champ CSS reste vide ?
Si aucun texte CSS n'est saisi avant de lancer le traitement, un message indique que l'entrée est vide et aucun résultat n'est généré.
L'analyseur valide-t-il la syntaxe globale de la feuille de style ?
Non, le traitement se concentre exclusivement sur l'extraction des motifs de propriétés personnalisées et le comptage des références var(), sans valider la conformité CSS globale.