Перейти к содержанию
TextArray
100% локально

CSS-форматер

Превратите минифицированный или беспорядочный CSS в чистые, читаемые правила с отступами.

Входные данные
Выходные данные

CSS-форматер

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

Инструмент читает ваш CSS посимвольно, а не разбивает его на простые шаблоны, поэтому он никогда не ломается при работе со сложным контентом. Строки сохраняют свое точное содержимое, поэтому содержимое: "a{b}" сохраняется с фигурными скобками внутри него. Тела url() копируются дословно, поэтому URI данных с собственными точками с запятой и двоеточиями — url(data:image/png;base64,...) — остается совершенно нетронутым. Комментарии остаются слово в слово на отдельной строке с текущим отступом.

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

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

FAQ

Изменяет ли это мои значения CSS или имена свойств?
Нет. Он только добавляет и нормализует пробелы и разрывы строк. Селекторы, свойства, значения, цвета, единицы измерения, тела url() и комментарии сохраняются точно так, как написано.
Нарушат ли скобки внутри строк или url() форматирование?
Нет. Сканер символов отслеживает состояние строки, комментария и url(), поэтому содержимое: "a{b}" и url(data:...;base64,...) копируются дословно и никогда не рассматриваются как структура.
Что делает «Один селектор на строку»?
Он помещает каждый селектор списка, разделенного запятыми, на отдельную строку, поэтому h1, h2, h3 становятся на три строки выше открывающей скобки. Запятые внутри :is() или селекторов атрибутов никогда не разделяются.
Может ли он исправить неверный CSS?
Он максимально форматирует и никогда не допускает ошибок при неправильном вводе, но не проверяет и не восстанавливает ваш CSS. Недостающие фигурные скобки или случайные символы располагаются так, как позволяет их структура.
Загружен ли мой CSS где-нибудь?
Нет. Форматирование полностью выполняется в вашем браузере, и ваш CSS никогда не покидает ваше устройство.