Минифицирует CSS, убирая комментарии и лишние пробелы и объединяя повторяющиеся правила, — или делает обратное, форматируя код по одному объявлению на строку. Оба направления используют настоящие парсеры (csso и js-beautify), поэтому текст, похожий на комментарий, внутри строки content:, пробелы в calc() и URI вида data: остаются нетронутыми.
Чем минификация отличается от форматирования?
Минификация удаляет комментарии и лишние пробельные символы, а также безопасно объединяет повторяющиеся правила, создавая максимально компактный CSS — удобно, чтобы уменьшить таблицу стилей перед публикацией. Форматирование делает обратное: заново расставляет отступы, размещая по одному объявлению на строку, благодаря чему минифицированный или неаккуратный файл снова становится читаемым. Оба режима используют настоящие парсеры CSS (csso и js-beautify), поэтому сложное содержимое — например, похожий на комментарий текст внутри строки content:, пробелы внутри calc() и data:-URI — сохраняется, а не портится наивной заменой текста.
Как пользоваться CSS-минификатором
- Вставьте — вставьте CSS, который нужно минифицировать или отформатировать, в верхнее поле ввода.
- Выберите отступ — 2 пробела, 4 пробела или табуляцию (применяется только к результату форматирования и не влияет на минификацию).
- Запустите — нажмите кнопку «Минифицировать» или «Форматировать», и обработка произойдёт мгновенно прямо в браузере.
- Скопируйте — посмотрите на индикатор уменьшения размера и нажмите «Копировать», чтобы поместить результат в буфер обмена.
Есть ли риск, что минификация изменит стили?
Нет. Этот инструмент не выполняет слепую замену текста, а с помощью настоящего парсера CSS (csso) разбирает таблицу стилей в синтаксическое дерево и лишь затем безопасно оптимизирует её. Поэтому похожие на комментарий строки внутри content:, значимые пробелы внутри calc(), data:-URI и вендорные префиксы сохраняются без изменений, а результат рендеринга остаётся прежним.
Насколько уменьшается размер?
Зависит от исходного файла, но для CSS с большим количеством комментариев и отступов, удобного для чтения человеком, размер обычно уменьшается на 30–60%. У уже минифицированного файла выигрыш будет небольшим. После преобразования индикатор размера сразу показывает, сколько байт и процентов удалось сэкономить по сравнению с оригиналом. А при передаче с сервера дополнительное сжатие gzip или brotli уменьшает реальный объём ещё сильнее.
Когда использовать форматирование (beautify)?
Форматирование пригодится, когда нужно прочитать или отредактировать CSS, сжатый в одну строку, или файл с беспорядочными отступами. Оно заново расставляет по одному объявлению на строку с единообразными отступами, что удобно для отладки опубликованной таблицы стилей или для понимания чужого кода. Перед повторной публикацией достаточно снова минифицировать файл.
Загружается ли мой CSS куда-либо?
Нет. И минификатор, и форматировщик работают полностью внутри вашего браузера с использованием самостоятельно размещённых библиотек — ваш CSS никогда не отправляется на сервер и не сохраняется на нём. После преобразования индикатор размера показывает, сколько байт сэкономила минификация, а кнопка «Копировать» сразу помещает результат в буфер обмена.