CSS-форматирование и украшение

Вставьте CSS или минифицированный CSS-код, а затем приведите его в читаемый вид с правильными отступами или минифицируйте для использования в продакшене. Поддерживаются все современные CSS-свойства.

Ввод

Вывод

Возможности

Переключение «оформить/сжать»

Сортировка свойств

Удаление дубликатов

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

1. Вставьте CSS-код в поле ввода слева.

2. Нажмите «Форматировать» для украшения или «Минифицировать» для сжатия.

3. Скопируйте отформатированный результат из правой панели.

Об этом инструменте

Минифицированный или отредактированный вручную CSS трудно проверять: одна длинная строка скрывает дублирующиеся правила, пропущенные точки с запятой и переопределения. Этот форматировщик пересобирает таблицу стилей — по одному объявлению в строке с единообразным отступом в два пробела, четыре пробела или табуляцию, — сохраняя строки, комментарии и вложенные блоки вроде @media и @supports. Минификация делает обратное для продакшена: удаляет комментарии и лишние пробелы, чтобы уменьшить объём передачи. Можно вставить код или перетащить файл .css, а затем скопировать или скачать результат. Форматирование меняет только оформление — порядок и смысл правил остаются прежними, поэтому каскад работает как раньше.

Часто задаваемые вопросы

Изменит ли форматирование поведение моего CSS?

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

Сколько экономит минификация CSS?

Удаление комментариев и пробелов обычно уменьшает написанную вручную таблицу стилей на 15–30%. Сжатие gzip или Brotli на сервере экономит гораздо больше, поэтому в продакшене используйте и то, и другое.

Поддерживаются ли @media, @supports и вложенные правила?

Да. At-правила и вложенные блоки получают отступ по уровню, а их содержимое форматируется как любое другое правило, так что медиазапросы остаются удобочитаемыми.

Сохраняются ли комментарии?

При форматировании блочные комментарии сохраняются и выносятся на отдельные строки. При минификации они удаляются, поскольку браузеру не нужны.

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

Он не проверяет названия и значения свойств. Он форматирует то, что получил, поэтому опечатка вроде colr: red останется в результате; для поиска ошибок используйте редактор или линтер, например Stylelint.

CSS-форматирование и украшение

Возможности

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

Об этом инструменте

Часто задаваемые вопросы

Похожие инструменты