Inspecteur de variables CSS et valeurs de repli

Collez le CSS pour analyser les références comme du texte. Le contrôle ne résout ni portée des sélecteurs, ni héritage, ni cascade.

Fonctionne localement dans votre navigateur
Tout dans cet outil est traité dans ce navigateur. KivTools ne télécharge pas, ne stocke pas et n’appelle aucune API tierce avec votre entrée.
Source CSSLes définitions et les références sont analysées sous forme de texte ; aucune feuille de style n'est appliquée à cette page.

Comment vérifier les définitions et les références var() d’une feuille de style

Collez une feuille de style : la page la lit comme du texte et liste les propriétés personnalisées définies, celles utilisées par var() et les écarts entre les deux : une référence sans définition ni valeur de repli utilisable, ou une définition que rien n’utilise dans le texte collé.

Les commentaires et les chaînes entre guillemets sont ignorés : une règle commentée ou un "var(--x)" dans content ne compte pas comme un usage réel, et la dernière déclaration d’un bloc est lue même sans point-virgule.

  1. Collez le CSS dans la zone de gauche, ou cliquez sur Charger un exemple pour obtenir une feuille avec un jeton non défini, un jeton inutilisé et une valeur de repli.
  2. Cliquez sur Inspecter les variables : la carte des propriétés personnalisées affiche une carte par jeton et le rapport liste chaque jeton avec ses valeurs et son nombre d’usages.
  3. Lisez les constats : une référence non définie demande une définition ou une valeur de repli, une définition inutilisée peut être un reste et un jeton défini deux fois peut être un écrasement volontaire.
  4. Utilisez Copier pour récupérer le rapport, ou Télécharger pour l’enregistrer sous css-variables-report.txt.
  5. Cliquez sur Effacer pour vider d’un coup la saisie, la carte et le rapport.

Ce que comptent le rapport et les métriques, quels constats apparaissent et ce qu’une analyse de texte ne voit pas

Ce qui compte comme définition et comme référence

Une propriété personnalisée est une déclaration dont le nom commence par deux tirets, où qu’elle soit : dans :root, dans une classe ou dans une media query. La valeur va jusqu’au premier point-virgule ou jusqu’à l’accolade fermante, donc la dernière déclaration d’un bloc est lue même sans point-virgule, et une valeur contenant des parenthèses comme rgb(0, 0, 0) reste entière.

Les références sont les appels var(), et le nom du jeton distingue les majuscules : --Brand et --brand sont deux jetons différents, comme dans le navigateur. Le nom de la fonction n’y est pas sensible, donc VAR(--x) compte aussi, et un var() écrit dans la valeur de repli d’un autre appel apparaît séparément. Une valeur de repli ne compte que si elle a un contenu : var(--x,) rend la déclaration invalide quand --x manque, et est donc traité comme un appel sans repli.

Lire les constats et les métriques

Les métriques comptent les définitions, les références et les points à vérifier ; la carte indique par jeton combien de fois il est défini, combien d’appels var() l’utilisent et combien de ceux-ci apportent une valeur de repli utilisable, sous forme de proportion. Un jeton défini mais non référencé dans le texte collé est signalé comme inutilisé, et un jeton déclaré dans deux blocs comme un écrasement possible ; dans les deux cas, le message précise que la portée est le texte collé.

Une référence sans définition ni valeur de repli est le seul constat qui casse toujours dans le navigateur, et le seul signalé comme une erreur. Un CSS sans aucune propriété personnalisée n’est pas validé pour autant : la page indique que rien n’a été trouvé au lieu d’affirmer que tout est couvert.

Ce que l’analyse de texte ne voit pas, et ce qui reste chez vous

L’analyse est volontairement textuelle : elle ne résout ni la portée des sélecteurs, ni l’héritage, ni la cascade, et ne calcule pas ce que le navigateur utiliserait à l’exécution. Un jeton défini dans une autre feuille, injecté par JavaScript ou fourni par un design system apparaîtra ici comme non défini, et inutilisé signifie inutilisé dans ce texte, pas dans tout le projet.

Tout s’exécute dans le navigateur ; le texte collé n’est jamais envoyé et ne déclenche aucune requête, et l’outil fonctionne hors ligne. Copier et Télécharger restent bloqués tant qu’aucun rapport n’existe, pour qu’un presse-papiers vide ou un fichier de zéro octet ne passe pas pour un résultat.

Outils récents :