CSS Minifier — Мініфікатор CSS
Мініфікуйте та реструктуруйте CSS за допомогою CSSO прямо в браузері. Порівняйте розмір до й після, а потім скопіюйте або завантажте файл .min.css.
🔒 Працює повністю у вашому браузері — нічого не завантажуєтьсяЩо робить мініфікатор CSS
Цей інструмент зменшує таблиці стилів за допомогою CSSO (CSS Optimizer) — мініфікатора, який розуміє CSS, а не обробляє його як звичайний текст. Під час першого проходу він виконує безпечне очищення: видаляє пробіли й коментарі, скорочує кольори (#ff0000 перетворюється на red, #ffffff — на #fff), прибирає одиниці виміру в нульових значень, позбувається зайвих лапок і крапок з комою та записує числа в найкоротшій формі. Результат — повністю еквівалентний CSS, який помітно менший.
Якщо ввімкнено restructure (реструктуризацію), CSSO йде далі й оптимізує структуру таблиці стилів. Правила з однаковим селектором об’єднуються, селектори з ідентичними оголошеннями групуються, властивості, які перевизначаються далі в тому самому правилі, відкидаються, а розгорнуті оголошення, як-от окремі відступи margin, можуть бути згорнуті в скорочений запис. CSSO ретельно зберігає каскад: він переміщує чи об’єднує правила лише тоді, коли це не може змінити, яке оголошення переможе.
Як читати результати
Бейджі показують розмір вхідних і вихідних даних у UTF-8 та відсоток економії. CSS, написаний вручну, з коментарями й відступами, часто зменшується на 20–50%. Вихідний код фреймворків, який уже компактний, виграє менше, а таблиці стилів, що повторюють ті самі оголошення в багатьох селекторах, отримують найбільше користі від реструктуризації. Сервери зазвичай додатково застосовують gzip або Brotli, тож мініфікація та стиснення доповнюють одне одного, а не конкурують.
Приватно й безпечно
Мініфікатор працює повністю у вашому браузері — нічого не завантажується, не журналюється й не зберігається. Тому він зручний для вбудованого критичного CSS, шаблонів електронних листів, вбудовуваних віджетів або швидких виправлень на комп’ютері без звичних інструментів збирання. Зберігайте коментарі /*! ... */, якщо ваша таблиця стилів містить сторонні ліцензії, які потрібно залишити. Для продакшн-сайтів додайте мініфікатор у процес збирання, щоб кожне розгортання оптимізувалося автоматично, і завжди перевіряйте результат візуально, якщо ваш CSS покладається на браузерні хаки чи незвичний синтаксис.
Як користуватися
- Додайте CSSВставте таблицю стилів або перетягніть файл .css в область завантаження.
- Оберіть параметриВирішіть, чи реструктуризувати правила та чи зберігати коментарі /*! license */.
- МініфікуйтеНатисніть Minify CSS і перевірте розмір до, після та відсоток економії.
- Скопіюйте або завантажтеСкопіюйте мініфікований CSS або завантажте його як файл .min.css.