CSS Минификатор и Бьютифайер
Сжать CSS для продакшена или Красиво оформить для чтения (100% на клиенте)
Документация Минификатора и Форматтера CSS
Что это за инструмент?
Минификация CSS удаляет синтаксически ненужные символы без изменения поведения: пробелы между правилами, переносы строк, CSS-комментарии (/* ... */), лишние точки с запятой перед закрывающими скобками. Форматтер выполняет обратную операцию с консистентными отступами и переносами строк.
Основные возможности
- Удаление пробелов и комментариев: все межправиловые пробелы, переносы строк и /* */ комментарии удаляются. Строковые литералы и url() сохраняются. /*! ... */ лицензионные блоки сохраняются при включённой опции.
- Компактификация селекторов: множественные пробелы в селекторах сворачиваются, последняя точка с запятой перед } удаляется, 0px→0 и 0.5→.5 нормализуются.
- Настраиваемый отступ: 2 пробела, 4 пробела или табуляция; одно правило в строке; @media, @keyframes, вложенные селекторы сохраняются.
- Поддержка CSS custom properties: var()-выражения и пробелы в calc() не сжимаются (может нарушить парсинг в ряде браузеров).
- Отображение дельты размера: исходные байты, минифицированные байты и процент сжатия рядом с результатом.
Типичные случаи использования
- Продакшн-пайплайн: интеграция в Webpack (css-minimizer-webpack-plugin), Vite (встроенный Lightning CSS) или Gulp (gulp-clean-css).
- Отладка минифицированного CSS сторонних библиотек: форматирование Bootstrap 5 или Tailwind-вывода.
- Очистка устаревших таблиц стилей: рефорамтирование перед рефакторингом.
- Сокращение payload CDN: минифицированный CSS уменьшает байты передачи и улучшает LCP; обычно 20-50%.
Как этот инструмент обрабатывает CSS
Удаление пробелов
Удаляет все ненужные пробелы, переносы строк и табуляции. Правила CSS сжимаются в одну строку без влияния на функциональность. Пример: `.btn { color: red; }` становится `.btn{color:red;}`
Удаление комментариев
Удаляет все комментарии CSS (/* ... */), если не включена опция "Сохранить комментарии". Важные лицензионные комментарии с синтаксисом /*! ... */ обычно сохраняются большинством минификаторов.
Удаление избыточных символов
Устраняет ненужные точки с запятой (последнее свойство в правиле), пробелы вокруг операторов и лишние нули (0.5 → .5). Сокращает коды цветов (#ffffff → #fff).
Оптимизация свойств
Удаляет пробелы вокруг фигурных скобок, двоеточий и запятых. Пример: `margin: 10px 20px;` становится `margin:10px 20px;`. Примечание: пробелы сохраняются в calc() и других функциях, где они необходимы.
Влияние на размер файла
20-50% сокращения для написанного вручную CSS. 5-15% для фреймворков. 40-60% для файлов с большим количеством комментариев. Gzip добавляет ещё 70-80% сокращения передаваемых данных.
| Сценарий | Исходный | Минифицированный | Уменьшение | Gzip |
|---|---|---|---|---|
| Хорошо отформатированный CSS с комментариями | 50 KB | 25-30 KB | 40-50% | ~5-8 KB (85-90% всего) |
| Уже компактный CSS с небольшим количеством комментариев | 30 KB | 24-27 KB | 10-20% | ~4-6 KB (80-85% всего) |
| Документационный CSS с большим количеством комментариев | 100 KB | 40-50 KB | 50-60% | ~8-12 KB (88-92% всего) |
Связанные инструменты
HTML Минификатор и Украшатель
Сжатие или украшение HTML кода, удаление пробелов и комментариев для оптимизации размера файла или форматирование кода для удобочитаемости
JavaScript Минификатор и Украшатель
Сжатие или украшение JavaScript кода, удаление пробелов и комментариев для оптимизации размера файла или форматирование кода для удобочитаемости
Выбор и конвертер цвета
Преобразование цветов между форматами HEX, RGB, HSL, CMYK, YCbCr, Lab, генерация цветовых палитр и проверка контраста WCAG
Генератор цветовых палитр
Профессиональный генератор цветовых палитр с смешиванием цветов, созданием градиентов, цветовыми схемами и экспортом в форматы CSS/SCSS/JSON
Конвертер изображений в Base64
Преобразование изображений в кодировку Base64 с поддержкой форматов PNG, JPG, GIF, SVG, WebP, генерация Data URI и CSS фонов
Проверка различий текста
Сравнение различий между двумя текстами или файлами с бок о бок подсвеченным видом