Как отформатировать CSS с правильными отступами и переносами строк

Для чего нужен форматтер CSS

CSS Formatter помогает привести таблицу стилей к читаемому виду: расставляет переносы строк и единообразные отступы в режиме beautify либо уплотняет запись в режиме minify. Такой инструмент удобен перед проверкой изменений, публикацией фрагмента CSS или разбором кода, который записан в одну длинную строку. Форматирование меняет представление кода, но само по себе не проверяет CSS как валидатор и не подтверждает соответствие стандартам.

Вставьте CSS в основное поле ввода. Для непустого текста можно выбрать размер отступа от 0 до 8 пробелов. Если значение нельзя преобразовать в число или оно выходит за этот диапазон, для обработки непустого текста используется значение 2. Режим beautify применяется по умолчанию, когда режим не задан; режим minify убирает блочные комментарии, сокращает пробельные последовательности и удаляет окружающие пробелы у фигурных скобок, точек с запятой и двоеточий. Пустой или состоящий только из пробелов ввод обрабатывается отдельно и даёт пустой результат.

Как отформатировать CSS

Подготовьте фрагмент CSS. Удалять комментарии или вручную расставлять переносы перед отправкой не нужно. Перед форматированием убедитесь, что в поле находится текст: значение другого типа не проходит проверку, если только пустое основное значение не заменяется непустым значением из отдельного устаревшего поля css.
Вставьте фрагмент в основное поле. Если поле пустое либо содержит только пробелы, результат будет пустым, а размеры входа и выхода будут равны нулю. В этом случае проверка размера, нормализация отступа, нормализация режима и проверка зависимости форматирования не выполняются.
Выберите режим beautify, чтобы получить многострочную запись с отступами, или minify, чтобы сократить пробелы и убрать блочные комментарии. Если режим не выбран, для непустого CSS используется beautify. Строковое название режима приводится к нижнему регистру; другие значения могут привести к ошибке обработки, поэтому задавайте режим обычной строкой.
Укажите размер отступа от 0 до 8. Для непустого ввода некорректное значение заменяется на 2. Если нужен компактный результат без дополнительного отступа, можно выбрать 0, но это не превращает режим beautify в minify: способ расстановки переносов по-прежнему определяется выбранным режимом.
Запустите форматирование и просмотрите результат. Для непустого текста размером не более 1 000 000 байт в UTF-8 обработка может завершиться успешно, если вход имеет допустимый тип и доступна необходимая зависимость форматирования. Текст, превышающий этот порог, завершается ошибкой до форматирования. Пустой и пробельный ввод относится к отдельной ветке и ограничение размера для него не применяется.
Сравните получившуюся структуру с исходником. В beautify проверьте переносы, вложенность и выбранный отступ. В minify отдельно убедитесь, что удаление блочных комментариев и сокращение пробелов приемлемо для вашей задачи. Если результат нужен для публикации или ревью, сохраните исходный CSS отдельно и не размещайте рядом с ним пароли или другие секреты.

Как читать результат и учитывать ограничения

Результат в режиме beautify предназначен для чтения: правила и объявления получают последовательную структуру с переносами строк и отступами. В режиме minify вывод становится компактнее за счёт описанных преобразований пробелов и блочных комментариев. Это не означает, что инструмент проверил селекторы, значения свойств или синтаксис. Ошибка в исходном CSS, неподходящий тип входа, превышение размера или недоступная зависимость могут помешать обработке.

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

Например, возьмите строку .card{color:red;margin:0}, вставьте её в основное поле, выберите beautify и отступ 2. Проверяемая форма результата должна быть многострочной: селектор отделён от блока объявлений, объявления расположены внутри блока, а вложенность выражена отступами. Для того же ввода режим minify должен дать компактную запись с преобразованиями, предусмотренными этим режимом. Сравнивайте именно структуру и заявленный режим, а не ожидайте от форматтера проверки корректности CSS или гарантии сохранения каждого исходного пробела.

Практический пример

Разработчик получил CSS в одну строку и хочет быстро подготовить его к чтению перед проверкой изменений.

Вставьте .card{color:red;margin:0} в основное поле, выберите beautify и установите отступ 2, затем сравните структуру результата с исходной строкой.

В beautify получится многострочная структура с селектором, блоком объявлений и отступами; в minify запись станет компактнее согласно правилам этого режима.

Ограничения

Среда заявляет отсутствие сетевого доступа, но это не показывает, где запускается инструмент, как обрабатываются данные после запроса и требуется ли учётная запись. Форматирование также не заменяет проверку CSS и не подтверждает соответствие стандартам.

Частые ошибки

Причина: в поле передан не текст или режим задан значением, для которого нельзя выполнить приведение к нижнему регистру. Исправление: вставьте CSS как строку и укажите режим обычным текстовым значением, например beautify или minify.

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

Можно ли отправить пустое поле?

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

Чем режим minify отличается от beautify?

Можно выбрать minify. Этот режим убирает блочные комментарии, сокращает пробельные последовательности и удаляет окружающие пробелы у фигурных скобок, точек с запятой и двоеточий. Если нужен читаемый многострочный CSS, оставьте beautify.

Какой размер отступа выбрать?

Для непустого текста используйте значение от 0 до 8. Значение, которое нельзя преобразовать в число, или число вне этого диапазона заменяется на 2. Пробельный ввод обрабатывается раньше и может вернуть переданное значение без такой нормализации.