CSS-мініфікатор

Вставте таблицю стилів, щоб прибрати пробіли й коментарі, скоротити значення на кшталт #ff0000 → red і об'єднати повторювані правила за допомогою структурних оптимізацій CSSO.

Працює в браузеріБез реєстраціїНічого не завантажується

Мініфікований результат

Як користуватися: CSS-мініфікатор

  1. Вставте CSS або відкрийте файл .css.
  2. Залиште Реструктуризацію увімкненою, щоб об'єднувати правила й оголошення, або вимкніть її для безпечного проходу лише по пробілах.
  3. Залиште Зберігати ліцензійні коментарі, щоб зберегти повідомлення /*! … */.
  4. Порівняйте початковий, мініфікований і gzip-розмір.
  5. Скопіюйте результат або завантажте output.min.css.

Як працює мініфікація CSS

Інструмент використовує CSSO (CSS Optimizer), який розбирає таблицю стилів у синтаксичне дерево й виводить її назад у найкоротшій еквівалентній формі. Окрім видалення пробілів і коментарів, він застосовує безпечні заміни значень:

  • #ffffff → #fff, #ff0000 → red
  • 0px → 0, 0.90 → .9
  • margin: 8px 16px 8px 16px → margin:8px 16px
  • Порожні правила й повторювані оголошення видаляються

Що робить «реструктуризація»?

Реструктуризація аналізує всю таблицю стилів: правила з однаковими оголошеннями об'єднуються в один список селекторів (.a,.b{color:red}), а повторювані селектори зливаються. На реальних таблицях стилів це часто заощаджує ще 5–15%. CSSO об'єднує правила, лише якщо порядок каскаду не змінюється, але якщо ви покладаєтеся на незвичні перевизначення, її можна вимкнути для суто синтаксичної мініфікації.

Навіщо мініфікувати CSS?

CSS блокує рендеринг: браузер не може відмалювати сторінку, доки таблиці стилів у <head> не завантажено й не розібрано. Менший CSS означає швидший First Contentful Paint і кращі Core Web Vitals, що корисно і користувачам, і позиціям у пошуку. Для найкращого результату поєднуйте мініфікацію з gzip або Brotli на сервері.

Поширені запитання

Чи безпечно мініфікувати CSS?
Так. Пробіли й коментарі не впливають на рендеринг CSS, а заміни значень CSSO еквівалентні за специфікацією. Реструктуризація зберігає порядок каскаду; вимкніть її, якщо потрібен максимально консервативний результат.
Чи підтримується сучасний CSS: custom properties, вкладеність і @layer?
Так. Custom properties (--var), @media, @supports, @layer, @container і синтаксис grid зберігаються.
Чи можна потім повернути мініфікований CSS у читабельний вигляд?
Мініфікований CSS можна знову відформатувати будь-яким форматером, але видалені коментарі не відновити. Зберігайте вихідний файл і вважайте мініфікований результатом збирання.
Чи завантажується моя таблиця стилів кудись?
Ні. Мініфікація виконується в браузері; нічого не надсилається на сервер.

Схожі інструменти

JavaScript-мініфікатор Стиснення й обфускація імен JS через Terser зі статистикою розміру та gzip. HTML-мініфікатор Видалення коментарів і пробілів, мініфікація вбудованих CSS/JS. SQL-форматер Форматування й мініфікація SQL для PostgreSQL, MySQL, T-SQL, BigQuery тощо. JSON-форматер Форматування, мініфікація й валідація JSON із зазначенням рядка/стовпця помилки.