Online Tool Store
CSS-variabelen-extractor
Plak CSS en extraheer elke variabele: conflicterende herdefinities, ongebruikte en niet-gedefinieerde variabelen. Export als :root, JSON of var()-lijst.
🔒 Deze tool werkt volledig in je browser. Je bestanden worden nooit naar een server geüpload.
Browsertool
CSS-variabelen-extractor
Hoe het werkt
- Begin met het al geladen voorbeeld, of plak je eigen CSS.
- Bekijk het overzicht — elke gevonden variabele, herdefinities met conflicterende waarden, en ongebruikte of niet-gedefinieerde variabelen.
- Bekijk de volledige tabel met selector, waarde en afgeleid type (kleur, lengte, lettertype, enzovoort) van elke variabele.
- Kies een exportformaat — een schoon :root-blok, JSON of een var()-lijst — en kopieer of download het.
FAQ
Werkt dit in mijn browser?
Ja. Je CSS wordt lokaal op de pagina verwerkt — er wordt niets geüpload en er is geen account nodig.
Wat telt als een herdefinieerde variabele?
Een custom property die meer dan één keer met verschillende waarden wordt gedeclareerd — meestal een :root-standaardwaarde plus een override onder een dark-mode media query of een themaklasse. Elke voorkomst wordt getoond met selector en regelnummer, zodat je precies ziet waar de waarden verschillen, in plaats van stilzwijgend alleen de eerste te bewaren.
Wat betekenen "ongebruikt" of "niet-gedefinieerd" hier?
Ongebruikt betekent dat een variabele met -- is gedeclareerd, maar nergens via var() wordt aangeroepen. Niet-gedefinieerd is het omgekeerde — iets roept var(--naam) aan, maar --naam is nergens in de geplakte CSS gedeclareerd. Beide zijn veelvoorkomende restjes na een refactor, en niet-gedefinieerde verwijzingen zijn degene die echt de moeite waard zijn om te herstellen, omdat de browser stilzwijgend terugvalt op de beginwaarde van de property.
Herkent het CSS binnen @media of andere geneste blokken?
Ja. Een :root-blok genest in @media (prefers-color-scheme: dark) of een vergelijkbare at-rule wordt correct aan :root toegewezen, niet aan de @media-wrapper.
Kan ik de voorbeelddata gebruiken?
Ja. De widget laadt met een voorbeeld dat expres een dark-mode-herdefinitie, een ongebruikte variabele en een niet-gedefinieerde verwijzing bevat, zodat je alle drie de controles in actie ziet voordat je je eigen CSS plakt.
Welke exportformaten zijn beschikbaar?
Een schoon :root {}-blok, een platte JSON-tokenmap, of een simpele lijst van var(--naam)-verwijzingen — kopieer of download wat past bij waar je het resultaat in plakt.
In welk formaat moet ik mijn CSS plakken?
Plak je CSS custom properties één declaratie per regel, zoals ze binnen een :root-blok zouden staan, bijvoorbeeld `--brand: #0f766e;`. Elke regel wordt één rij in de geëxtraheerde lijst.
Is er een limiet aan hoeveel CSS ik kan plakken?
Geen harde limiet — alles draait lokaal in je browser, dus de extractiesnelheid hangt alleen af van je eigen apparaat, niet van een server.
Hoe we ons verhouden
| Functie | Online Tool Store | HTMLToolz CSS Variables Extractor | HexaTools CSS Variable Extractor |
|---|---|---|---|
| Vindt variabelen onder elke selector, niet alleen :root | ✓ | ✓ | Alleen :root wordt gecontroleerd |
| Markeert conflicterende herdefinities en toont elke voorkomst | ✓ | Niet getoond | Bewaart stilzwijgend alleen de eerste — ontbrekende override niet opgemerkt |
| Markeert ongebruikte variabelen en niet-gedefinieerde var()-verwijzingen | ✓ | Niet getoond | Niet getoond, ondanks beweerde gebruikscontrole |
| :root binnen @media herleid naar de echte selector | ✓ | Niet van toepassing — alleen :root-output | Niet getoond |
| Exporteer als :root-blok, JSON of var()-lijst | ✓ | ✓ | Alleen platte lijst |
Elk echt CSS-bestand dat een controle waard is, heeft een dark-mode-override of een vergeten ongebruikt token — precies het geval dat een extractor die alleen op naam vergelijkt, mist, en waar deze er direct tegen is getest.