Форматировать и сортировать CSS, SCSS, медиа-запросы и keyframes анимации

Форматировщик CSS — это онлайн-инструмент для красивого форматирования и минификации CSS-таблиц стилей. Он разворачивает сжатый CSS в читаемый вид, а также сжимает готовый CSS в компактную форму для улучшения производительности загрузки страниц. Поддерживаются все возможности CSS 3, включая селекторы, свойства, медиа-запросы и анимации keyframes.

Шаг 1 — вставьте CSS, который нужно обработать, в левую панель или нажмите «Пример», чтобы загрузить образец. Шаг 2 — инструмент форматирует код в реальном времени с отступами по глубине селекторов. Шаг 3 — нажмите «Форматировать», чтобы явно запустить полный проход. Шаг 4 — нажмите «Минифицировать», чтобы удалить пробелы, переносы и комментарии и получить компактный однострочный результат. Шаг 5 — правая панель поддерживает копирование в один клик или скачивание как файла .css.

Фронтенд-разработчики форматируют CSS, скопированный из DevTools, для удобства отладки; минифицируют таблицы стилей перед деплоем, чтобы уменьшить трафик и время загрузки; форматируют вывод сборки Tailwind CSS для анализа; разворачивают сторонние библиотеки, такие как Bootstrap или Font Awesome, для изучения их структуры; извлекают и оптимизируют фрагменты CSS из скомпилированного Less / SCSS.

Форматирование использует лёгкие правила вместо полного разбора CSSOM. Пробелы между селекторами, свойствами и значениями нормализуются. Правила @import, @media, @keyframes и @font-face получают корректные отступы. Режим минификации удаляет комментарии и пустые строки между селекторами, но сохраняет порядок свойств и сокращённые значения. CSS-выражения (expression()) и нестандартные расширения не поддерживаются.

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