Online Tool Store
Ekstraktor zmiennych CSS
Wklej CSS i wyodrębnij każdą zmienną: konfliktujące redefinicje, nieużywane i niezdefiniowane zmienne wykryte. Eksport jako :root, JSON lub lista var().
🔒 To narzędzie działa w całości w Twojej przeglądarce. Twoje pliki nigdy nie są wysyłane na serwer.
Narzędzie przeglądarkowe
Ekstraktor zmiennych CSS
Jak to działa
- Zacznij od już wczytanego przykładu albo wklej własny CSS.
- Przejrzyj podsumowanie — każdą znalezioną zmienną, redefinicje z konfliktującymi wartościami oraz nieużywane lub niezdefiniowane zmienne.
- Sprawdź pełną tabelę z selektorem, wartością i wykrytym typem (kolor, długość, czcionka itd.) każdej zmiennej.
- Wybierz format eksportu — czysty blok :root, JSON lub listę var() — a następnie skopiuj lub pobierz.
FAQ
Czy to działa w mojej przeglądarce?
Tak. Twój CSS jest przetwarzany lokalnie na stronie — nic nie jest przesyłane, nie potrzeba konta.
Co liczy się jako zredefiniowana zmienna?
Właściwość niestandardowa zadeklarowana więcej niż raz z różnymi wartościami — najczęściej wartość domyślna w :root plus nadpisanie w media query trybu ciemnego lub klasie motywu. Każde wystąpienie jest pokazane z selektorem i numerem linii, dzięki czemu widzisz dokładnie, gdzie wartości się różnią, zamiast po cichu zachowywać tylko pierwszą.
Co oznacza tutaj "nieużywana" lub "niezdefiniowana"?
Nieużywana oznacza, że zmienna jest zadeklarowana za pomocą -- ale nigdzie nie jest przywoływana przez var(). Niezdefiniowana to sytuacja odwrotna — coś wywołuje var(--nazwa), ale --nazwa nigdzie nie jest zadeklarowana we wklejonym CSS. Obie sytuacje to typowe pozostałości po refaktoryzacji, a niezdefiniowane odwołania to te, które naprawdę warto naprawić, ponieważ przeglądarka po cichu wraca do wartości początkowej właściwości.
Czy obsługuje CSS wewnątrz @media lub innych zagnieżdżonych bloków?
Tak. Blok :root zagnieżdżony wewnątrz @media (prefers-color-scheme: dark) lub podobnej reguły at jest poprawnie przypisywany do :root, a nie do otoczki @media.
Czy mogę użyć przykładowych danych?
Tak. Widżet ładuje się z przykładem, który celowo zawiera redefinicję w trybie ciemnym, nieużywaną zmienną i niezdefiniowane odwołanie, dzięki czemu widzisz działanie wszystkich trzech kontroli, zanim wkleisz własny CSS.
Jakie formaty eksportu są dostępne?
Czysty blok :root {}, płaska mapa tokenów JSON lub prosta lista odwołań var(--nazwa) — skopiuj lub pobierz ten, który pasuje do miejsca, w które wklejasz wynik.
W jakim formacie powinienem wkleić mój CSS?
Wklej swoje właściwości niestandardowe CSS po jednej deklaracji w linii, tak jak wyglądałyby wewnątrz bloku :root, na przykład `--brand: #0f766e;`. Każda linia staje się jednym wierszem na wyodrębnionej liście.
Czy jest limit ilości CSS, który mogę wkleić?
Bez sztywnego limitu — wszystko działa lokalnie w przeglądarce, więc szybkość ekstrakcji zależy tylko od Twojego urządzenia, a nie od serwera.
Jak wypadamy na tle innych
| Funkcja | Online Tool Store | HTMLToolz CSS Variables Extractor | HexaTools CSS Variable Extractor |
|---|---|---|---|
| Znajduje zmienne pod dowolnym selektorem, nie tylko :root | ✓ | ✓ | Sprawdzany jest tylko :root |
| Wykrywa konfliktujące redefinicje, pokazując każde wystąpienie | ✓ | Nie pokazano | Po cichu zachowuje tylko pierwsze — brakujące nadpisanie niewykryte |
| Wykrywa nieużywane zmienne i niezdefiniowane odwołania var() | ✓ | Nie pokazano | Nie pokazano, mimo deklarowanego audytu użycia |
| :root wewnątrz @media rozwiązywany do prawdziwego selektora | ✓ | Nie dotyczy — tylko wyjście :root | Nie pokazano |
| Eksport jako blok :root, JSON lub lista var() | ✓ | ✓ | Tylko zwykła lista |
Każdy prawdziwy plik CSS wart audytu ma nadpisanie w trybie ciemnym lub zapomniany, nieużywany token — dokładnie ten przypadek, który umyka ekstraktorowi porównującemu tylko nazwy, i właśnie w tym miejscu to narzędzie zostało z nim bezpośrednio porównane.