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

Q: Поддерживается ли современный CSS: custom properties, вложенность и @layer?

Да. Custom properties (--var), @media, @supports, @layer, @container и синтаксис grid сохраняются.

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

Работает в браузереБез регистрацииНичего не загружается

Ввод

Открыть файл

Минифицированный результат

Как пользоваться: CSS-минификатор

Вставьте CSS или откройте файл .css.
Оставьте Реструктуризацию включённой, чтобы объединять правила и объявления, или выключите её для безопасного прохода только по пробелам.
Оставьте Сохранять лицензионные комментарии, чтобы сохранить уведомления /*! … */.
Сравните исходный, минифицированный и gzip-размер.
Скопируйте результат или скачайте 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 можно заново отформатировать любым форматтером, но удалённые комментарии не восстановить. Храните исходный файл и считайте минифицированный результатом сборки.

Загружается ли моя таблица стилей куда-либо?

Нет. Минификация выполняется в браузере; ничего не отправляется на сервер.