Сжать CSS: минификация онлайн
Вставьте стили и получите сжатый CSS: комментарии и пробелы уйдут, размер файла упадёт на 20–40%.
Минифицированный CSS появится здесь
Что делает минификация
Минификатор убирает из CSS всё, что нужно человеку, но не нужно браузеру: комментарии, переносы строк и лишние пробелы. Плюс мелкая оптимизация значений — #ffffff превращается в #fff, а 0px просто в 0. Поведение стилей при этом не меняется.
Файл обычно худеет на 20–40%, а если код щедро откомментирован — то и больше. Поверх этого сервер отдаёт стили сжатыми через gzip или brotli, и там экономия ещё заметнее: в минифицированном CSS меньше повторяющегося «воздуха», поэтому он сжимается лучше.
Единственное, о чём стоит помнить: минифицированный CSS нечитаем для человека. Исходник храните отдельно, а в продакшен кладите сжатую версию — обычно это делает сборщик, а не руками.
Удобный порядок работы: сначала соберите стили в генераторах — например, подберите цвета в конвертере цветов и фон в генераторе градиентов, — а минификатор примените последним шагом, перед тем как положить файл в продакшен.
Пять преобразований, которые делает инструмент. Каждое можно отключить переключателями выше:
| Что делает | Было | Стало |
|---|---|---|
| Убирает комментарии | /* заголовок */ | ничего |
| Схлопывает пробелы и переносы | color: red; | color:red |
| Убирает точку с запятой перед скобкой | margin:0;} | margin:0} |
| Сокращает цвета | #ffffff, rgb(0,0,0) | #fff, #000 |
| Убирает единицы у нуля и ведущий ноль | 0px, 0.5em | 0, .5em |
Похожие инструменты
Другие полезные инструменты из той же категории
Часто задаваемые вопросы
Вставьте стили в поле выше и нажмите кнопку — минификатор вернёт сжатый код, готовый к вставке в продакшен. Ничего никуда не отправляется: сжатие происходит прямо в браузере.
Убирает всё, что нужно человеку, но не нужно браузеру: комментарии, переносы строк, лишние пробелы и последнюю точку с запятой в блоке. Плюс мелкая оптимизация значений — #ffffff превращается в #fff, а 0px просто в 0. Поведение стилей при этом не меняется ни на йоту.
Обычно на 20–40% от исходного размера, а если код щедро откомментирован и отформатирован — то и больше. Поверх этого сервер обычно отдаёт файл сжатым через gzip или brotli, и там экономия ещё заметнее: минифицированный CSS сжимается лучше, потому что в нём меньше повторяющегося «воздуха».
Нет. Удаляются только символы, которые браузер и так игнорирует. Единственное, о чём стоит помнить: минифицированный CSS нечитаем для человека, поэтому исходник храните отдельно, а в продакшен кладите сжатую версию.
Да. Gzip и brotli работают на уровне передачи файла, а минификация — на уровне самого кода, и эффекты складываются: чем меньше «воздуха» и повторов в исходнике, тем эффективнее его сожмёт gzip. Пропустить этот шаг — значит просто оставить экономию на столе.
Да! Минификатор поддерживает современные CSS возможности, включая CSS Grid, Flexbox, переменные (custom properties), calc(), медиа-запросы и все современные селекторы и свойства.