Comment analyser les variables CSS et repérer celles sans référence

Collez un extrait CSS non vide pour obtenir les déclarations reconnues, les références var() comptées par nom et les déclarations sans référence reconnue. Le résultat aide à orienter une vérification, mais ne remplace pas l’analyse complète d’une feuille de style.

À quoi sert l’analyse des variables CSS ?

Cet outil sert à examiner un extrait de CSS contenant des propriétés personnalisées, souvent écrites avec le préfixe --. Il repère les déclarations reconnues, compte les utilisations de var(--nom) et signale les déclarations qui ne semblent associées à aucune référence reconnue. Vous pouvez ainsi repérer des variables probablement inutilisées avant de nettoyer une feuille de style.

L’analyse porte sur le texte CSS fourni. Elle ne remplace pas une validation CSS générale et ne calcule pas la valeur finale des variables. Elle est surtout utile pour obtenir une première vue des déclarations et de leurs usages dans l’extrait étudié.

Comment analyser un extrait CSS

1. Préparez un extrait CSS lisible. Ajoutez les déclarations de propriétés personnalisées sous la forme --nom: valeur;, avec un deux-points, une valeur et un point-virgule. Par exemple : --couleur: #246;. Les valeurs sont examinées après suppression des espaces superflus en début et en fin.

2. Repérez les utilisations écrites avec var(--nom). Une référence peut aussi contenir un contenu facultatif entre parenthèses, comme une valeur de remplacement. Le nom utilisé dans la référence doit correspondre au nom de la déclaration pour que l’association soit reconnue.

3. Collez le CSS dans la zone de saisie prévue, puis lancez l’analyse. Si plusieurs modes de saisie sont disponibles, privilégiez celui qui accepte directement le texte CSS. Lorsqu’un texte non vide et une autre valeur CSS sont fournis simultanément, le texte non vide est prioritaire.

4. Vérifiez que le contenu sélectionné n’est pas vide avant l’envoi. Une saisie vide entraîne un résultat signalant un échec. En cas de problème pendant le traitement, l’outil renvoie également un échec au lieu de poursuivre avec un résultat partiel.

5. Consultez le rapport obtenu. Il présente les déclarations reconnues, le total des déclarations, le total des déclarations sans référence reconnue et le nombre d’utilisations associé à chaque nom. Comparez les noms dans les deux sens : une déclaration sans utilisation mérite une vérification, tandis qu’une référence sans déclaration reconnue peut indiquer un nom différent ou une syntaxe non reconnue.

Comment lire le résultat

Une déclaration classée sans référence reconnue n’est pas nécessairement inutile dans votre projet. Elle peut être utilisée dans un autre fichier, dans un contenu ajouté séparément ou selon une forme que la reconnaissance de l’outil ne prend pas en compte. Utilisez donc cette liste comme point de départ pour une vérification manuelle avant de supprimer une variable.

Le comptage concerne les références reconnues par nom. Une même variable peut apparaître plusieurs fois et son total reflète ces occurrences. Le rapport ne détermine pas la valeur calculée par le navigateur, ne résout pas les valeurs de remplacement et ne recense pas chaque manière possible d’utiliser une propriété personnalisée.

Pour interpréter le résultat, commencez par les noms déclarés sans correspondance, puis recherchez-les dans le reste de votre code. Examinez aussi les références dont le nom ne figure pas parmi les déclarations reconnues. Cette comparaison aide à distinguer une variable possiblement abandonnée d’un simple extrait incomplet.

Exemple pratique

Vous examinez un extrait contenant --couleur: #246;, --espacement: 1rem;, puis des règles qui utilisent var(--couleur) et var(--espacement, 0).

Collez l’extrait dans la zone CSS, lancez l’analyse, puis comparez les deux noms de propriétés personnalisées dans le rapport.

Le rapport contient les déclarations reconnues, un total de déclarations, un total de déclarations sans référence reconnue et un comptage par nom pour les références trouvées.

Limites

• La reconnaissance est limitée à certaines formes de déclarations et de références. L’outil n’établit ni la validité CSS générale, ni la résolution des valeurs de remplacement, ni chaque utilisation possible des propriétés personnalisées.

Erreurs fréquentes

• Un résultat en échec apparaît souvent lorsque la zone contient une chaîne vide ou des déclarations qui ne suivent pas la forme reconnue. Collez un extrait CSS non vide et vérifiez la présence de --, du deux-points, d’une valeur et du point-virgule.

Questions fréquentes

Puis-je lancer l’analyse sans saisir de CSS ?

Oui, si le texte CSS fourni n’est pas vide. Une saisie vide entraîne un résultat en échec, même si le champ accepte par défaut une chaîne vide.

Le compteur indique-t-il la valeur produite par chaque variable ?

Le rapport compte les occurrences de références reconnues par nom, y compris lorsqu’une référence contient un contenu facultatif dans ses parenthèses. Il ne calcule pas la valeur finale de la variable.

Que signifie une déclaration sans référence ?

Une déclaration sans référence reconnue est signalée lorsque son nom ne correspond à aucune référence reconnue dans l’extrait. Vérifiez toutefois les autres fichiers et les formes d’écriture que l’outil ne reconnaît pas avant toute suppression.