Online Tool Store
CSS-Variablen-Extraktor
CSS einfügen und jede Variable extrahieren: Konflikte, ungenutzte und undefinierte Variablen erkannt. Export als :root, JSON oder var()-Liste.
🔒 Dieses Tool läuft vollständig in Ihrem Browser. Ihre Dateien werden niemals an einen Server hochgeladen.
Browser-Tool
CSS-Variablen-Extraktor
So funktioniert es
- Starte mit dem geladenen Beispiel oder füge eigenes CSS ein.
- Sieh dir die Übersicht an — jede gefundene Variable, widersprüchlich neu definierte sowie ungenutzte oder undefinierte Variablen.
- Prüfe die vollständige Tabelle mit Selektor, Wert und erkanntem Typ (Farbe, Länge, Schrift usw.) jeder Variable.
- Wähle ein Exportformat — ein sauberer :root-Block, JSON oder eine var()-Liste — und kopiere oder lade es herunter.
FAQ
Läuft das in meinem Browser?
Ja. Dein CSS wird lokal auf der Seite verarbeitet — es wird nichts hochgeladen, und es gibt kein Konto.
Was zählt als neu definierte Variable?
Eine benutzerdefinierte Eigenschaft, die mehrfach mit unterschiedlichen Werten deklariert wird — meist ein :root-Standardwert plus eine Überschreibung unter einer Dark-Mode-Media-Query oder einer Theme-Klasse. Jedes Vorkommen wird mit Selektor und Zeilennummer angezeigt, damit du genau siehst, wo sich die Werte unterscheiden, statt nur den ersten stillschweigend zu behalten.
Was bedeutet „ungenutzt“ oder „undefiniert“ hier?
Ungenutzt bedeutet, eine Variable ist mit -- deklariert, wird aber nirgends über var() referenziert. Undefiniert ist der umgekehrte Fall — var(--name) wird aufgerufen, aber --name ist im eingefügten CSS nirgends deklariert. Beides sind typische Überbleibsel nach einem Refactoring, wobei undefinierte Referenzen die eigentlich behebenswerten sind, da der Browser stillschweigend auf den Anfangswert der Eigenschaft zurückfällt.
Wird CSS innerhalb von @media oder anderen verschachtelten Blöcken erkannt?
Ja. Ein :root-Block innerhalb von @media (prefers-color-scheme: dark) oder einer ähnlichen At-Regel wird korrekt :root zugeordnet, nicht dem @media-Wrapper.
Kann ich die Beispieldaten verwenden?
Ja. Das Widget startet mit einem Beispiel, das absichtlich eine Dark-Mode-Neudefinition, eine ungenutzte Variable und eine undefinierte Referenz enthält, damit du alle drei Prüfungen in Aktion siehst, bevor du eigenes CSS einfügst.
Welche Exportformate gibt es?
Ein sauberer :root {}-Block, eine flache JSON-Token-Map oder eine reine Liste von var(--name)-Referenzen — kopiere oder lade herunter, was zu deinem Zielort passt.
In welchem Format soll ich mein CSS einfügen?
Füge deine CSS-Custom-Properties zeilenweise ein, so wie sie in einem :root-Block stehen würden, zum Beispiel `--brand: #0f766e;`. Jede Zeile wird zu einer Zeile in der extrahierten Liste.
Gibt es ein Limit, wie viel CSS ich einfügen kann?
Kein hartes Limit — alles läuft lokal in deinem Browser, die Extraktionsgeschwindigkeit hängt also nur von deinem eigenen Gerät ab, nicht von einem Server.
Der Vergleich
| Funktion | Online Tool Store | HTMLToolz CSS Variables Extractor | HexaTools CSS Variable Extractor |
|---|---|---|---|
| Findet Variablen unter jedem Selektor, nicht nur :root | ✓ | ✓ | Nur :root wird geprüft |
| Zeigt widersprüchliche Neudefinitionen mit jedem Vorkommen | ✓ | Nicht angezeigt | Behält stillschweigend nur die erste — fehlende Überschreibung nicht erkannt |
| Erkennt ungenutzte Variablen und undefinierte var()-Referenzen | ✓ | Nicht angezeigt | Nicht angezeigt, trotz behaupteter Nutzungsprüfung |
| :root innerhalb von @media wird richtig aufgelöst | ✓ | Nicht zutreffend — nur ein :root-Output | Nicht angezeigt |
| Export als :root-Block, JSON oder var()-Liste | ✓ | ✓ | Nur reine Liste |
Jede reale CSS-Datei, die eine Prüfung wert ist, hat eine Dark-Mode-Überschreibung oder eine ungenutzte Restvariable — genau der Fall, den ein Extraktor ohne Namensprüfung übersieht, und genau hier wurde dieser direkt dagegen getestet.