Форматувальник і мініфікатор CSS
Упорядкуйте CSS для читання або мініфікуйте перед випуском
Про цей інструмент
Розгорніть мініфікований чи скопійований CSS у правила з одним оголошенням на рядок, або стисніть таблицю стилів для продакшену. Прикрашувач нормалізує відступи й розташування фігурних дужок; мініфікатор прибирає коментарі, згортає пробіли й відкидає останні крапки з комою, лишаючи недоторканими рядки, вміст url(...) і вирази calc().
Мініфікатор прозорий щодо того, чого він не робить: він не перейменовує селектори, не зливає дублікати правил і не переписує кольори. Це робить вивід передбачуваним і безпечним для будь-якої таблиці стилів, зокрема з хаками й вендорними префіксами — вставив, мініфікував, випустив.
Як і в кожного інструмента тут, обробка локальна. Код ще не випущеної дизайн-системи лишається у вашому браузері.
Часті запитання
- Наскільки меншим стає мініфікований CSS?
- Зазвичай на 15–30% для написаного вручну CSS, здебільшого за рахунок відступів і коментарів. Gzip на вашому сервері прибирає значну частину тієї ж надлишковості, тож різниця на дроті менша, ніж підказує кількість сирих байтів, — мініфікуйте однаково, це ще й скорочує час розбору.
- Чи безпечно це для calc(), кастомних властивостей і медіазапитів?
- Так. Пробіли всередині calc() значущі й зберігаються; кастомні властивості та посилання var() — звичайні оголошення, які лишаються без змін; @media та інші at-правила зберігають свою структуру.
- Чому селектори нащадків зберегли свої пробіли?
- Бо «nav a» і «nava» обирають різні речі — пробіл тут комбінатор, а не оформлення. Мініфікатор прибирає лише ті пробіли, що не мають синтаксичного значення.
- Чи вміє він перетворювати між LESS/SCSS і CSS?
- Ні — синтаксис препроцесорів потребує компіляції, а не форматування. Звичайний SCSS, який водночас є коректним CSS, відформатується нормально; вкладені правила й міксини — ні.