Форматирование и минификация CSS

Форматируйте запутанный CSS для удобства чтения или минифицируйте его для продакшена — с безопасным режимом, который никогда не меняет порядок правил.

Отступ
Сжатие
Вставьте или введите CSS для форматирования или минификации.

Ваш CSS форматируется и минифицируется прямо в браузере. Данные не отправляются на BroBroGo.

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

В чем разница между форматированием и минификацией?

Форматирование (Beautify) восстанавливает отступы и расставляет пробелы, чтобы стили было удобно читать и редактировать. Минификация (Minify) делает обратное — удаляет пробелы и комментарии, которые не нужны браузеру, а также сокращает значения (например, цвета), чтобы уменьшить размер файла и ускорить его загрузку. Форматируйте в процессе работы, минифицируйте перед публикацией.

Что делают режимы сжатия «Безопасный» и «Оптимизированный»?

Режим «Безопасный» (Safe) только удаляет пробелы и комментарии и сокращает значения, оставляя каждое правило ровно там, где вы его написали. Режим «Оптимизированный» (Optimized) идет дальше и объединяет дублирующиеся селекторы и правила для максимального сжатия — он может менять порядок правил, поэтому для таблиц стилей, зависящих от исходного порядка, стоит сделать быструю проверку перед публикацией. Комментарии вида /*! … */ сохраняются в обоих режимах.

Изменит ли минификация внешний вид моей страницы?

В безопасном режиме (Safe) — нет, ваши стили будут отображаться точно так же. Он сжимает пробелы, удаляет обычные комментарии и переписывает значения в более короткие эквивалентные формы (например, #ffffff как #fff), никогда не изменяя вендорные префиксы или современный синтаксис. Оптимизированный режим (Optimized) также объединяет правила: визуально результат идентичен почти для всех таблиц стилей, но если ваш код зависит от порядка правил, это стоит перепроверить.