Vérifier la portée des propriétés personnalisées CSS

Cet outil compare le sélecteur qui définit une variable à celui qui l’utilise. Il valide les deux chaînes, gère les listes de sélecteurs et indique si chaque branche d’utilisation est structurellement couverte par une branche de définition. Vous pouvez ainsi repérer une cause fréquente de jetons de design manquants avant d’examiner les styles calculés dans le navigateur.

Indiquez les points de définition et d’utilisation

Saisissez dans le champ de définition le sélecteur de la règle qui déclare la propriété personnalisée, puis dans le champ d’utilisation celui de la règle qui appelle <code>var()</code>. Par exemple, un jeton défini sur <code>.theme-dark .card</code> est disponible pour <code>.theme-dark .card &gt; .title</code>, car le titre est sélectionné sous la carte qui reçoit la déclaration. Une définition sur <code>:root</code> est considérée comme globale puisque l’élément racine est un ancêtre du contenu du document. Les deux champs acceptent des listes séparées par des virgules. L’outil évalue chaque branche d’utilisation séparément et exige qu’elles soient toutes couvertes pour produire une réponse globale vraie. Il précise également la branche de définition associée à chaque utilisation couverte, ce qui facilite l’audit d’une longue liste. Cette vérification porte sur la relation entre les sélecteurs : vous n’avez pas à coller une feuille de style, un bloc de déclarations, le nom de la propriété ni sa valeur. Avec uniquement les deux sélecteurs concernés, le résultat reste centré sur la portée de la cascade, indépendamment de l’ordre des sources et de la syntaxe des valeurs.

Interprétez la décision de portée structurelle

L’outil modélise la partie de la disponibilité d’une propriété personnalisée qui peut être déduite des seuls sélecteurs. Il détermine si le sélecteur de définition peut désigner le même élément que le sélecteur d’utilisation, ou l’un de ses ancêtres. Les exigences composées sont respectées : une définition sur <code>.card.featured</code> n’est pas supposée couvrir une utilisation qui ne mentionne que <code>.card</code>. Les combinateurs d’enfant doivent rester des combinateurs d’enfant, tandis qu’une relation de descendance peut traverser des composés supplémentaires dans le sélecteur d’utilisation. Les listes constituent des alternatives côté définition et des obligations côté utilisation. Cette méthode volontairement prudente évite d’affirmer qu’une variable est disponible lorsque la relation n’apparaît pas dans le texte. Les conditions d’exécution peuvent toujours modifier la cascade réelle. L’ordre des sources, les règles conditionnelles, les limites du Shadow DOM, les styles en ligne, les couches, la spécificité, les réinitialisations explicites et l’arbre réel du document ne font pas partie de cette entrée. Considérez un résultat vrai comme une confirmation de l’inclusion structurelle et consultez les styles calculés du navigateur pour établir la valeur finale dans un document rendu précis.

Corrigez les entrées ambiguës grâce aux erreurs de validation

Chaque sélecteur est analysé avant la comparaison. Une branche vide dans une liste, des crochets ou parenthèses non appariés, un combinateur inachevé, une ponctuation de déclaration, un jeton de classe, d’ID ou de pseudo-sélecteur incomplet, ainsi que toute autre forme incorrecte provoquent une erreur d’entrée plutôt qu’une réponse approximative. La distinction est utile en automatisation : faux signifie que les sélecteurs fournis sont valides mais que l’utilisation demandée n’est pas couverte structurellement ; une erreur signifie qu’aucune conclusion n’a été établie. Ne placez que des sélecteurs dans les champs. N’ajoutez ni accolades, ni points-virgules, ni déclaration de propriété personnalisée, ni règle CSS complète. Les caractères échappés, valeurs d’attribut entre guillemets, sélecteurs d’attribut et pseudo-classes fonctionnelles restent groupés pendant la segmentation, afin que leurs virgules et combinateurs ne soient pas pris pour une syntaxe de premier niveau. L’algorithme est déterministe, n’effectue aucune requête réseau et impose une longueur maximale fixe. Vous pouvez donc l’intégrer à une étape de lint, à une revue de modifications ou à un script de migration de jetons avec un résultat reproductible. Si un sélecteur relationnel avancé dépend d’un DOM actif, interprétez prudemment une absence de couverture et vérifiez-la dans le balisage cible.