CSS Минификатор и Бьютифайер
Сжать CSS для продакшена или Красиво оформить для чтения (100% на клиенте)
Документация Минификатора и Форматтера CSS
Что это за инструмент?
Этот инструмент позволяет сжимать (минифицировать) или форматировать CSS-код. Минификация удаляет ненужные пробелы, комментарии и избыточные символы для уменьшения размера файла для развертывания в продакшене. Форматирование форматирует CSS с правильными отступами и переносами строк для лучшей читабельности во время разработки.
Основные возможности
- Минификация CSS - Удаление пробелов, переносов строк и комментариев для уменьшения размера файла
- Форматирование CSS - Форматирование CSS с правильными отступами и переносами строк для читабельности
- Настраиваемый размер отступа (2 пробела, 4 пробела или табуляция)
- Опция сохранения комментариев при минификации
- Сравнение размеров файлов с показом коэффициента сжатия
Типичные случаи использования
- Оптимизация CSS-файлов для развертывания в продакшене для уменьшения времени загрузки страницы
- Форматирование минифицированного или сжатого CSS для упрощения отладки и проверки кода
- Очистка CSS-кода с непоследовательным форматированием
- Снижение использования пропускной способности путем предоставления пользователям минифицированного CSS
Как этот инструмент обрабатывает CSS
Удаление пробелов
Удаляет все ненужные пробелы, переносы строк и табуляции. Правила CSS сжимаются в одну строку без влияния на функциональность. Пример: `.btn { color: red; }` становится `.btn{color:red;}`
Удаление комментариев
Удаляет все комментарии CSS (/* ... */), если не включена опция "Сохранить комментарии". Важные лицензионные комментарии с синтаксисом /*! ... */ обычно сохраняются большинством минификаторов.
Удаление избыточных символов
Устраняет ненужные точки с запятой (последнее свойство в правиле), пробелы вокруг операторов и лишние нули (0.5 → .5). Сокращает коды цветов (#ffffff → #fff).
Оптимизация свойств
Удаляет пробелы вокруг фигурных скобок, двоеточий и запятых. Пример: `margin: 10px 20px;` становится `margin:10px 20px;`. Примечание: пробелы сохраняются в calc() и других функциях, где они необходимы.
Влияние на размер файла
Минификация CSS обычно достигает уменьшения размера файла на 20-50% в зависимости от форматирования исходного кода и плотности комментариев. В сочетании со сжатием Gzip на стороне сервера общее уменьшение может превысить 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 фонов
Проверка различий текста
Сравнение различий между двумя текстами или файлами с бок о бок подсвеченным видом