Что такое Минификатор CSS?

CSS Minifier сжимает ваш CSS, удаляя пробелы, комментарии и избыточный синтаксис. Файлы меньше — загружаются быстрее и поднимают оценку PageSpeed.

Под капотом работает алгоритм CSSO, который делает больше, чем просто убирает пробелы. Он объединяет соседние правила с одним селектором, убирает избыточные значения в коротких записях (margin: 10px 10px 10px 10px становится margin: 10px), удаляет ненужные вендорные префиксы и укорачивает шестизначные HEX-цвета до трёх символов там, где это возможно.

Как использовать

1. Вставьте CSS-код в поле ввода, загрузите .css-файл или подгрузите таблицу стилей прямо по URL.
2. Нажмите «Сжать» — инструмент удалит комментарии, пробелы и сократит значения.
3. Скопируйте сжатый результат или скачайте его как .css-файл. Коэффициент сжатия отображается автоматически.

Когда использовать

• Опубликовать таблицу стилей статичного сайта без шага сборки.
• Сравнить две версии CSS и увидеть, сколько повторений накопилось в ручном коде.
• Сэкономить последние байты при инлайнинге критического CSS в head HTML.

Результат

Таблица стилей размером 24 КБ с комментариями и форматированием сжимается до 16 КБ — сокращение на 33%, что экономит около 50 мс загрузки при 3G-соединении.

Частые вопросы

Минифицированный CSS отображается иначе, чем исходный?

Браузеры обрабатывают минифицированный и отформатированный CSS одинаково. Каскад, специфичность и итоговые стили не меняются. Меняется только размер файла на диске и при передаче.

Нужно ли дополнительно сжимать через gzip?

Да. Gzip поверх минификации даёт ещё 60-80% экономии. Большинство CDN применяют gzip автоматически. Сначала минифицировать всё равно полезно: gzip хорошо сжимает повторы, а в минифицированном CSS их больше.

Не сломает ли минификация мои source map?

Эта утилита не делает source map, потому что работает с единственной CSS-строкой, а не с графом сборки. Если карты нужны, используйте сборщик вроде esbuild или Vite, который рядом с минифицированным CSS выдаёт .css.map.

Почему в минифицированном файле остаются пробелы?

CSS оставляет пробелы внутри строковых значений, между частями селектора (.a .b отличается от .a.b) и внутри calc(). Минификатор убирает только семантически лишние пробелы, остальное оставляет.

Безопасно ли минифицировать CSS с кастомными свойствами (CSS-переменными)?

Да. Имена и значения кастомных свойств остаются без изменений. Минификатор сжимает только форматирование вокруг них. Переменные вроде --brand-color сохраняются дословно и продолжают работать в var().

Похожие инструменты