Gültigkeitsbereich von CSS-Variablen prüfen

Dieses Werkzeug vergleicht den Selektor, der eine Variable definiert, mit dem Selektor, der sie verwendet. Es validiert beide Zeichenfolgen, verarbeitet Selektorlisten und zeigt an, ob jeder Nutzungszweig strukturell von mindestens einem Definitionszweig abgedeckt wird. So erkennen Sie eine häufige Ursache fehlender Design-Tokens, bevor Sie berechnete Stile im Browser untersuchen.

Geben Sie Definitions- und Verwendungsstellen an

Tragen Sie in das Definitionsfeld den Selektor der Regel ein, welche die benutzerdefinierte Eigenschaft deklariert. In das Nutzungsfeld kommt der Selektor der Regel, die <code>var()</code> aufruft. Ein unter <code>.theme-dark .card</code> definiertes Token steht beispielsweise für <code>.theme-dark .card &gt; .title</code> zur Verfügung, weil der Titel unterhalb der Karte ausgewählt wird, die die Deklaration erhält. Eine Definition unter <code>:root</code> gilt als global, da das Wurzelelement ein Vorfahre des Dokumentinhalts ist. Beide Felder dürfen kommagetrennte Selektorlisten enthalten. Das Werkzeug bewertet jeden Nutzungszweig einzeln; das Gesamtergebnis ist nur dann wahr, wenn alle Zweige abgedeckt sind. Zu jedem abgedeckten Nutzungszweig wird außerdem der passende Definitionszweig genannt, sodass sich auch lange Listen gut prüfen lassen. Untersucht wird ausschließlich die Beziehung zwischen Selektoren. Sie müssen weder ein Stylesheet noch einen Deklarationsblock, den Eigenschaftsnamen oder dessen Wert einfügen. Mit den beiden relevanten Selektoren bleibt das Ergebnis auf den Kaskadenbereich konzentriert und wird nicht durch Quellreihenfolge oder Wertsyntax vermischt.

Verstehen Sie die strukturelle Bereichsentscheidung

Das Werkzeug bildet den Teil der Verfügbarkeit einer benutzerdefinierten Eigenschaft ab, der allein aus Selektoren bestimmt werden kann. Es prüft, ob der Definitionsselektor dasselbe Element wie der Nutzungsselektor oder einen seiner Vorfahren bezeichnen kann. Zusammengesetzte Anforderungen werden berücksichtigt: Eine Definition unter <code>.card.featured</code> deckt nicht automatisch eine Nutzung ab, die lediglich <code>.card</code> nennt. Kindkombinatoren müssen Kindkombinatoren bleiben, während eine Nachfahrenbeziehung zusätzliche Verbindungen im Nutzungsselektor überspannen darf. Selektorlisten wirken auf der Definitionsseite als Alternativen und auf der Nutzungsseite als Verpflichtungen. Dieser bewusst vorsichtige Ansatz behauptet keine Verfügbarkeit, wenn die Beziehung im Selektortext nicht erkennbar ist. Laufzeitbedingungen können die tatsächliche Kaskade weiterhin verändern. Quellreihenfolge, bedingte Regeln, Shadow-DOM-Grenzen, Inline-Stile, Ebenen, Spezifität, ausdrückliche Rücksetzungen und der wirkliche Dokumentbaum gehören nicht zur Eingabe. Verstehen Sie ein wahres Ergebnis als Bestätigung struktureller Einordnung. Wenn Sie den endgültigen Wert in einem bestimmten gerenderten Dokument belegen müssen, prüfen Sie zusätzlich die berechneten Stile im Browser.

Beheben Sie mehrdeutige Eingaben anhand von Validierungsfehlern

Jeder Selektor wird vor dem Vergleich analysiert. Leere Zweige in Selektorlisten, nicht geschlossene Klammern, unvollständige Kombinatoren, Deklarationszeichen, unvollständige Klassen-, ID- oder Pseudoselektor-Tokens und andere fehlerhafte Formen erzeugen einen Eingabefehler statt eines geratenen Ergebnisses. Diese Unterscheidung ist für Automatisierungen wichtig: Falsch bedeutet, dass die angegebenen Selektoren gültig sind, die gewünschte Nutzung aber strukturell nicht abgedeckt wird. Ein Fehler bedeutet, dass keine Bereichsaussage getroffen wurde. Geben Sie in die Felder ausschließlich Selektoren ein. Geschweifte Klammern, Semikolons, die Deklaration einer benutzerdefinierten Eigenschaft oder eine vollständige CSS-Regel gehören nicht hinein. Maskierte Zeichen, in Anführungszeichen gesetzte Attributwerte, Attributselektoren und funktionale Pseudoklassen bleiben während der Zerlegung gruppiert. Dadurch werden enthaltene Kommas und Kombinatoren nicht als Syntax der obersten Ebene behandelt. Der Algorithmus ist deterministisch, stellt keine Netzwerkanfrage und verwendet eine feste Längenbegrenzung. Sie können ihn daher in einer Lint-Prüfung, einer Änderungsprüfung oder einem Migrationsskript für Tokens einsetzen und für dasselbe Paar stets dasselbe Ergebnis erhalten. Falls komplexe relationale Selektoren nur mit einem aktiven DOM entscheidbar sind, deuten Sie ein nicht abgedecktes Ergebnis vorsichtig und prüfen Sie das Ziel-Markup.