Минификатор CSS: сжать или отформатировать таблицу стилей

Как пользоваться

Вставьте таблицу стилей в поле CSS. Строки и url() сохраняются точно в таком виде, как есть.
Оставьте в поле Режим значение «Сжать (меньше)», чтобы сделать CSS меньше, или выберите «Форматировать (для чтения)», чтобы сделать его удобным для чтения.
Сравните Байтов до и Байтов после, чтобы увидеть, сколько сэкономлено.
Скопируйте Результат или скачайте его как styles.css.

Что сжатие удаляет и что сохраняет

Комментарий CSS идёт от /* до */ и удаляется, кроме уведомления, которое начинается с /*!: его инструмент сохраняет, потому что в нём может быть лицензия или указание автора. Спецификация CSS Syntax (на английском) определяет комментарий, а инструмент читает строки и маркеры url() по тем же правилам, поэтому их содержимое копируется как есть.

Пробелы убираются там, где грамматика их не требует: вокруг фигурных скобок, запятых, двоеточий в объявлениях и перед восклицательным знаком. Последняя точка с запятой блока уходит, потому что закрывающая скобка и так заканчивает блок. Пробел перед двоеточием в селекторе остаётся, потому что селектор «.card :hover» означает другое, чем «.card:hover».

a { color : red ; }  превращается в  a{color:red}

Цвета, нули и сокращения, которые не делаются

Шестнадцатеричный цвет, у которого пары цифр повторяются, записывается тремя или четырьмя знаками: #ffffff становится #fff, а #aabbccdd — #abcd. Буквы записываются строчными. Цвет в селекторе никогда не меняется, потому что селектор вроде #aabbcc обозначает идентификатор.

Длина 0px в начале значения становится 0. Внутри функции вроде calc() и в пользовательском свойстве, имя которого начинается с двух дефисов, длина остаётся как есть, потому что голый 0 не во всех контекстах читается как длина. Форматирование не меняет ни цвета, ни длины.

Размеры считаются в байтах UTF-8, так сервер отправляет файл: буква с диакритическим знаком занимает два байта.
Проверяйте страницу после сжатия, потому что редкий приём для старого браузера может зависеть от пробела, который сжатие убирает.

Пример: правило с комментарием, цветом и нулём

Текст .card { color: #aabbcc; /* note */ margin: 0px 10px; } содержит комментарий, шестнадцатеричный цвет с повторяющимися парами и нулевую длину в начале значения. При сжатии комментарий и пробелы убираются, цвет записывается как #abc, а ноль — как 0.

Результат: .card{color:#abc;margin:0 10px}, и правило работает точно так же, как раньше.

Частые вопросы

Сжатый CSS для браузера — то же самое, что исходный?

Да, для браузера правила применяются так же, потому что инструмент убирает только то, что грамматика CSS не требует. Всё же проверяйте страницу после сжатия, поскольку редкий приём может зависеть от пробела.

Почему инструмент не убирает каждую единицу у нуля?

Ноль внутри функции вроде calc() и в пользовательском свойстве не всегда читается как длина, поэтому инструмент укорачивает 0px только в начале значения. Так результат остаётся безопасным во всех случаях, которые он обрабатывает.

Почему при форматировании комментарии стоят на отдельных строках?

Каждый комментарий записывается на отдельной строке на уровне правила, к которому относится, поэтому структура таблицы стилей легко читается. Уведомления, которые начинаются с /*!, тоже сохраняются.

Проверяет ли инструмент CSS на ошибки?

Нет. Он читает структуру: проверяет, что фигурные скобки, строки и url() без кавычек закрываются. Он не проверяет, верны ли имя свойства или значение, поэтому для этого используйте валидатор.

Отправляется ли мой CSS куда-либо или сохраняется?

Нет. Сжатие и форматирование выполняются в вашем браузере. Ничего не сохраняется и не отправляется на наш сервер, поэтому скопируйте результат до того, как уйдёте со страницы.

Источники

Цифры и текст в последний раз проверены вторник, 10 ноября 2026 г..

Результат