Online Tool Store
Екстрактор CSS-змінних
Вставте CSS і отримайте кожну змінну: конфліктні перевизначення, невикористані й невизначені змінні знайдено. Експорт у :root, JSON або список var().
🔒 Цей інструмент працює повністю у вашому браузері. Ваші файли ніколи не завантажуються на сервер.
Інструмент у браузері
Екстрактор CSS-змінних
Як це працює
- Почніть із уже завантаженого прикладу або вставте свій CSS.
- Перегляньте зведення — кожну знайдену змінну, будь-які перевизначення з конфліктними значеннями та невикористані або невизначені змінні.
- Перевірте повну таблицю із селектором, значенням і визначеним типом (колір, довжина, шрифт тощо) кожної змінної.
- Оберіть формат експорту — чистий блок :root, JSON або список var() — а потім скопіюйте чи завантажте його.
FAQ
Це працює в моєму браузері?
Так. Ваш CSS обробляється локально на сторінці — нічого не завантажується на сервер, і обліковий запис не потрібен.
Що вважається перевизначеною змінною?
Користувацька властивість, оголошена більше одного разу з різними значеннями — найчастіше значення за замовчуванням у :root плюс перевизначення в медіазапиті темної теми або класі теми. Кожне входження показано із селектором і номером рядка, щоб ви бачили точно, де значення розходяться, замість того, щоб мовчки зберігати лише перше.
Що тут означає "невикористана" або "невизначена"?
Невикористана означає, що змінну оголошено через -- але ніде не викликано через var(). Невизначена — це протилежна ситуація: щось викликає var(--назва), але --назва ніде не оголошена у вставленому CSS. Обидва випадки — типові залишки після рефакторингу, а невизначені посилання — саме ті, які варто виправити, оскільки браузер мовчки повертається до початкового значення властивості.
Чи обробляється CSS всередині @media або інших вкладених блоків?
Так. Блок :root, вкладений у @media (prefers-color-scheme: dark) або подібне at-правило, коректно приписується до :root, а не до обгортки @media.
Чи можу я використати приклад даних?
Так. Віджет завантажується з прикладом, який навмисно містить перевизначення для темної теми, невикористану змінну та невизначене посилання, щоб ви побачили всі три перевірки в дії, перш ніж вставляти свій CSS.
Які формати експорту доступні?
Чистий блок :root {}, плоска карта токенів JSON або простий список посилань var(--назва) — скопіюйте або завантажте той, що підходить для вашого призначення.
У якому форматі вставляти мій CSS?
Вставляйте користувацькі властивості CSS по одному оголошенню на рядок, так само як вони виглядали б усередині блоку :root, наприклад `--brand: #0f766e;`. Кожен рядок стає одним рядком у витягнутому списку.
Чи є обмеження на обсяг CSS, який можна вставити?
Жорсткого обмеження немає — усе виконується локально у вашому браузері, тож швидкість вилучення залежить лише від вашого пристрою, а не від сервера.
Порівняння
| Функція | Online Tool Store | HTMLToolz CSS Variables Extractor | HexaTools CSS Variable Extractor |
|---|---|---|---|
| Знаходить змінні під будь-яким селектором, не лише :root | ✓ | ✓ | Перевіряється лише :root |
| Показує конфліктні перевизначення з усіма входженнями | ✓ | Не показано | Мовчки зберігає лише перше — відсутнє перевизначення не виявлено |
| Позначає невикористані змінні та невизначені посилання var() | ✓ | Не показано | Не показано, попри заявлену перевірку використання |
| :root усередині @media коректно визначається як справжній селектор | ✓ | Не застосовується — лише вивід :root | Не показано |
| Експорт як блок :root, JSON або список var() | ✓ | ✓ | Лише простий список |
У будь-якому реальному CSS-файлі, вартому перевірки, знайдеться перевизначення для темної теми або забута невикористана змінна — саме той випадок, який пропускає екстрактор, що порівнює лише назви, і саме на цьому цей інструмент був безпосередньо перевірений проти них.