CSS-Variablen analysieren und nicht referenzierte Custom Properties finden

Fügen Sie CSS-Text ein, um erkannte Custom Properties, zugehörige var()-Zählungen und Deklarationen ohne passenden erkannten Verweis zu erhalten. Bei leerer ausgewählter Eingabe liefert die Verarbeitung kein erfolgreiches Ergebnis.

Einsatzbereich der CSS-Variablenanalyse

Das CSS-Variablen-Tool untersucht bereitgestellten CSS-Text anhand erkannter Custom-Property-Deklarationen und ihrer var()-Verweise. Dadurch erhalten Sie eine strukturierte Übersicht über Variablennamen, die Anzahl gefundener Deklarationen und Namen, zu denen kein passender erkannter Verweis gefunden wurde. Das ist hilfreich, wenn Sie ein Stylesheet vor einer manuellen Überarbeitung auf möglicherweise ungenutzte Variablen durchsuchen möchten.

Für die Analyse genügt ein CSS-Ausschnitt oder ein vollständiger Stylesheet-Inhalt, sofern die relevanten Schreibweisen dem unterstützten Erkennungsmuster entsprechen. Eine Deklaration wie --farbe: #2563eb; kann dabei berücksichtigt werden, während der zugehörige Verweis beispielsweise als var(--farbe) auftreten kann. Die Auswertung liefert eine Orientierung für die weitere Prüfung, nicht die fachliche Beurteilung des gesamten Stylesheets.

CSS-Text in fünf Schritten auswerten

1. Öffnen Sie das CSS-Variablen-Tool und fügen Sie den zu untersuchenden Inhalt in das vorgesehene Texteingabefeld ein. Übernehmen Sie dabei die Regeln und Deklarationen, deren Variablennutzung Sie vergleichen möchten.

2. Prüfen Sie vor der Verarbeitung, ob der ausgewählte Text tatsächlich Inhalt enthält. Unterstützt die Oberfläche mehr als eine Eingabemöglichkeit, hat ein nicht leerer Textwert Vorrang vor dem anderen unterstützten CSS-Wert. Platzieren Sie deshalb die gewünschte Fassung in dem Eingabefeld, das für die Textanalyse vorgesehen ist.

3. Starten Sie die Verarbeitung mit der dafür vorgesehenen Aktion. Bei leerer ausgewählter Eingabe wird kein erfolgreiches Ergebnis geliefert; ersetzen Sie in diesem Fall den leeren Inhalt durch den zu prüfenden CSS-Text und führen Sie die Verarbeitung erneut aus.

4. Sehen Sie anschließend in der Ergebnisübersicht nach den erkannten Deklarationen, der Gesamtzahl der Deklarationen, der Anzahl nicht referenzierter Deklarationen und den Referenzzählungen je Variablenname. Vergleichen Sie für eine konkrete Prüfung den Namen einer Deklaration, etwa --abstand, mit erkannten Schreibweisen wie var(--abstand).

5. Gehen Sie gemeldete Kandidaten im ursprünglichen Stylesheet nach. Kontrollieren Sie dabei auch, ob die betreffende Schreibweise dem erwarteten Muster entspricht, bevor Sie eine Variable entfernen oder umbenennen. So trennen Sie einen tatsächlichen ungenutzten Eintrag von einem Inhalt, der von der Erkennung nicht berücksichtigt wurde.

Bedeutung der gefundenen Angaben

Die Zuordnung erfolgt über den Namen: Das Tool stellt erkannte Deklarationsnamen den erkannten Namen in var(--name)-Verweisen gegenüber. Jede gefundene Referenz wird ihrem Variablennamen zugeordnet und gezählt; zusätzlicher Inhalt innerhalb der Referenzklammern ändert dabei nicht den erkannten Namen. Eine Deklaration wird als nicht referenziert eingeordnet, wenn kein passender Name in den erkannten Verweisen vorkommt.

Die Deklarationsliste und die Summen beziehen sich nur auf Inhalte, die das jeweilige Erkennungsmuster erfüllen. Das Ergebnis sagt daher nicht, dass eine Variable im CSS fachlich wirkungslos ist. Es bewertet weder die Auflösung von Variablenwerten noch Fallback-Verhalten und erkennt nicht zwingend jede mögliche Nutzung einer Custom Property. Verwenden Sie die Meldung deshalb als gezielten Prüfhinweis und kontrollieren Sie den Zusammenhang anschließend im Stylesheet.

Praktisches Beispiel

Ein Stylesheet definiert --farbe: #2563eb; und verwendet die Variable in color: var(--farbe);, während --radius: 4px; keinen passenden erkannten Verweis besitzt.

Fügen Sie den genannten Stylesheet-Ausschnitt ein und verarbeiten Sie ihn. Prüfen Sie danach, ob --farbe in der Deklarationsliste erscheint, welcher Zählwert für --farbe ausgewiesen wird und ob --radius bei den nicht referenzierten Deklarationen auftaucht.

Die Ergebnisform umfasst eine Liste erkannter Deklarationen, die Gesamtzahl, die Zahl nicht referenzierter Deklarationen sowie Referenzzählungen je Variablenname.

Einschränkungen

• Berücksichtigt werden nur die implementierten Muster für Custom-Property-Deklarationen und var()-Verweise; Wertauflösung, Fallback-Verhalten und eine vollständige CSS-Prüfung gehören nicht zur Auswertung.

Häufige Fehler

• Leere oder nicht erkannte Eingabe: Ohne ausgewählten CSS-Inhalt entsteht kein erfolgreiches Ergebnis; auch eine Deklaration außerhalb des unterstützten Musters wird nicht als solche erfasst. Fügen Sie einen nicht leeren Ausschnitt mit einer Schreibweise wie --farbe: blau; ein und prüfen Sie die Darstellung anschließend erneut.

Häufige Fragen

Wie werden var()-Verweise gezählt?

Die Zählung erfolgt je erkanntem Variablennamen, sodass mehrere Vorkommen von var(--farbe) in die Anzahl für --farbe einfließen. Maßgeblich ist dabei, dass die Deklaration und der Verweis den unterstützten Mustern entsprechen.

Was bedeutet eine nicht referenzierte Deklaration?

Eine Deklaration erhält diesen Hinweis, wenn unter den erkannten Referenznamen kein übereinstimmender Name vorhanden ist. Die Aussage bezieht sich somit auf den untersuchten Text und die unterstützte Erkennung, nicht auf eine vollständige CSS-Semantik.

Warum wird kein erfolgreiches Ergebnis angezeigt?

Ein leeres Eingabefeld beziehungsweise eine leere ausgewählte Eingabe führt zu einem nicht erfolgreichen Ergebnis. Tragen Sie CSS-Text ein, der mindestens den zu prüfenden Inhalt enthält, und verarbeiten Sie ihn danach erneut.