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

Вставьте CSS в поле ввода, откройте файл .css или попробуйте пример.
Выберите «Форматировать» для читаемого кода или «Минифицировать» для минимального размера.
При форматировании выберите отступ: 2 пробела, 4 пробела или табуляцию.
Скопируйте результат или скачайте его как файл .css. Если фигурные скобки или кавычки не сбалансированы, в ошибке будут указаны строка и столбец.

Как это работает

Сначала форматировщик разбивает таблицу стилей на токены: строки в одинарных или двойных кавычках, значения url(…), комментарии, фигурные скобки и точки с запятой. Поскольку строки и url() являются отдельными токенами, точка с запятой внутри data URI или фигурная скобка внутри content: \"{ }\" никогда не нарушают структуру, а их содержимое копируется точно.

Beautify размещает каждый селектор из списка селекторов на отдельной строке, добавляет пробелы вокруг комбинаторов дочерних, соседних и смежных элементов (>, ~, +) и записывает каждое объявление как «свойство: значение;» на отдельной строке. Блоки внутри @media, @supports, @layer, @container и вложенности нативного CSS имеют отступ на один уровень на каждую глубину. Отсутствующая точка с запятой после последнего объявления блока добавляется. Комментарии остаются на своих местах.

Minify удаляет комментарии (кроме уведомлений о лицензии /*! … */), схлопывает пробелы, удаляет пробелы вокруг фигурных скобок, двоеточий, точек с запятой, запятых и комбинаторов селекторов, а также убирает точку с запятой перед каждой закрывающей фигурной скобкой. Пробелы, влияющие на смысл, сохраняются: комбинатор потомков в «.a .b», пробел в «a :focus», а также пробелы внутри значений, например calc(100% - 2px). «! important» нормализуется в «!important».

Инструмент не переписывает значения: цвета, единицы измерения и нули остаются как есть, а правила не объединяются и не переупорядочиваются. Файлы SCSS или Less с обычной вложенностью обычно работают, но их собственный синтаксис, например //-комментарии или примеси, не распознаётся.

Примеры

Чтение минифицированного файла фреймворка

Вставьте фрагмент однострочного bootstrap.min.css и выберите Beautify с 2 пробелами, чтобы увидеть каждое правило, медиазапросы и вложенные правила на отдельных строках с отступами.

Отправка написанной вручную таблицы стилей

Минифицируйте таблицу стилей размером 12 КБ с комментариями и отступами перед вставкой её встроенно в шаблон письма или в заголовок страницы. В сводке отображается количество символов до и после.

Поиск пропущенной скобки

Таблица стилей перестаёт применяться на середине. Форматировщик сообщает «Эта { никогда не закрывается парной }» с указанием строки правила, в котором отсутствует закрывающая скобка.

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

Безопасно ли использовать минифицированный CSS, полученный этим инструментом, в продакшене?

Он удаляет только комментарии и пробелы, которые CSS игнорирует, поэтому правила работают одинаково. Он не выполняет более глубокие оптимизации, как у инструментов сборки, — например, объединение правил или сокращение цветов, поэтому результат может быть немного больше, чем у них.

Почему в «a :focus» сохраняется пробел?

В селекторе пробел — это комбинатор потомков. «a :focus» означает сфокусированный элемент внутри ссылки, а «a:focus» — сфокусированную ссылку. Удаление этого пробела изменит, какие элементы соответствуют селектору.

Может ли он форматировать SCSS или Less?

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

Удаляются ли лицензионные комментарии при минификации?

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

Конфиденциальность

Ваш CSS обрабатывается только в вашем браузере. Ничего не загружается, не сохраняется и не включается в аналитику.