Минификация CSS
Минификация убирает из стилей всё, что нужно человеку и не нужно браузеру: комментарии, переносы, отступы, лишние точки с запятой. Дополнительно сокращаются цвета до трёх символов, нули до нуля без единиц и дробные значения без ведущего нуля. Инструмент показывает результат и экономию сразу в двух видах: в чистых байтах и с оценкой того, сколько останется после gzip — потому что на сервере файл почти всегда отдаётся сжатым, и настоящая выгода заметно меньше той, что показывают счётчики символов. Есть и обратное действие: минифицированный код разворачивается в читаемый вид с отступами.
Как пользоваться
- В левое поле — файл целиком или кусок.
- Сжать или развернуть обратно в читаемый вид.
- Переключателями: сокращать ли цвета, нули и убирать ли последнюю точку с запятой.
- Кнопкой копирования. Рядом показана экономия в байтах и после gzip.
Частые вопросы
Сколько реально экономит минификация
На чистых байтах обычно от 15 до 30% для рукописного CSS с комментариями и отступами. После gzip выигрыш падает примерно до 3–8%, потому что архиватор и так хорошо жмёт повторяющиеся пробелы и переносы. Это не значит, что минификация бесполезна: экономия остаётся, просто она в разы меньше цифры, которую показывает разница в символах.
Что именно можно убирать безопасно
Комментарии, переносы строк, отступы, пробелы вокруг скобок и двоеточий, последнюю точку с запятой в блоке. Осторожнее с пробелами внутри значений: в селекторах, в calc и в media-запросах пробел значащий, его удаление ломает правило. Инструмент эти места не трогает.
Почему нельзя сокращать все цвета до трёх символов
Потому что сокращение возможно, только когда каждый канал состоит из двух одинаковых символов: #aabbcc сжимается в #abc, а #a1b2c3 — нет. Слепое обрезание кода до трёх символов даёт другой цвет. Проверка на повторяющиеся пары здесь делается всегда.
Можно ли минифицировать вручную вместо сборщика
Для одного файла на лендинге — да. Для проекта с зависимостями это должен делать сборщик: он ещё и склеит файлы, выкинет неиспользуемые правила и расставит префиксы. Ручная минификация полезна как разовая операция и как способ посмотреть, из чего состоит файл.
Что даёт разворачивание минифицированного кода
Читаемость при разборе чужих стилей. Минифицированный файл — это одна длинная строка, в которой глазами не найти нужное правило. Разворачивание расставляет переносы и отступы, после чего в коде можно ориентироваться и искать поиском по селектору.
Влияет ли минификация на порядок правил
Нет, и это принципиально: каскад зависит от порядка, поэтому переставлять правила при минификации нельзя. Здесь порядок сохраняется полностью, меняется только форматирование.
Данные куда-то отправляются
Нет, весь текст обрабатывается в браузере и никуда не уходит.
Похожие инструменты
Число или список до тысячи значений в диапазоне: режим без повторов, сортировка. Отдельно вытягивает жребий из списка имён.
ОткрытьПроверка надёжности пароляСтойкость в битах, время перебора и разбор слабых мест: словарные слова под заменой символов, клавиатурные ряды, годы и повторы.
ОткрытьГенератор паролейПароль длиной до 64 символов с выбором наборов и отсевом похожих знаков. Показывает стойкость в битах и время перебора, делает до 50 паролей пачкой.
ОткрытьКолесо фортуныСлучайный выбор из своего списка: вес секторов пометкой «×3», режим на выбывание и ссылка, по которой открывается то же колесо.
ОткрытьГенератор тестовых данныхПачка вымышленных записей для тестов: ФИО, телефон, ИНН, СНИЛС, ОГРН, счёт и карта — с настоящими контрольными разрядами. Выгрузка в CSV, JSON и SQL.
ОткрытьГенератор CSS-градиентовЛинейный, радиальный и конический градиент с живым предпросмотром. Любое число цветовых точек, угол и позиции, разбор чужого кода обратно в точки.
ОткрытьЕщё инструменты для SEO и маркетинга
Кластеризатор запросов, генераторы sitemap и robots.txt, минус-слова, разметка Schema.org и калькуляторы — в разделе инструментов.