Форматтер CSS
Форматируйте минифицированные или неаккуратно оформленные таблицы стилей с помощью этого форматтера CSS. Вставьте CSS, и инструмент разберет его, а затем выведет каждое правило с селектором на одной строке, каждое объявление — на отдельной строке с отступом в два пробела, с пробелом после каждой двоеточия, пробелами вокруг комбинаторов и вложенными правилами at-rule, такими как медиазапросы. Ошибки разбора отображаются сообщением. Подходит веб-разработчикам и дизайнерам, которые читают, отлаживают или проверяют таблицы стилей из любых источников.
Часто задаваемые вопросы
Как работает форматтер CSS?
Он разбирает таблицу стилей на правила, объявления и правила at-rule, а затем выводит их снова в единообразном виде. Поскольку CSS разбирается, результат отражает реальную структуру таблицы стилей.
Как выглядит отформатированный CSS?
Каждое правило начинается с селектора и открывающей фигурной скобки. Каждое объявление размещается на отдельной строке с отступом в два пробела и пробелом после двоеточия, а закрывающая скобка — на отдельной строке. Списки селекторов объединяются запятой с пробелом, а вокруг комбинаторов, таких как > и ~, ставятся пробелы.
Поддерживаются медиазапросы и другие at-правила?
Да, правила внутри @media, @supports и подобных блоков вкладываются друг в друга и получают отступы. Инструкции, такие как @import, остаются в одной строке, а значения url() заключаются в кавычки.
Что происходит при некорректном CSS?
Если парсер не может прочитать таблицу стилей, например из-за отсутствующей фигурной скобки, инструмент останавливается и показывает сообщение парсера с номером строки. Исправьте указанное место и запустите форматирование снова.
Комментарии сохраняются?
Да, комментарии сохраняются и между правилами, и между объявлениями. Каждый комментарий размещается на отдельной строке с отступом, соответствующим окружающему коду.
Поддерживаются пользовательские свойства?
Да, пользовательские свойства, например --brand-color, форматируются как любые другие объявления. Ссылки, такие как var(--brand-color), сохраняются без изменений.
Можно ли здесь форматировать SCSS или Less?
Нет, эта страница предназначена для обычного CSS, а вложенные правила или переменные препроцессоров могут быть отклонены. Для таких файлов используйте форматтер SCSS или форматтер Less.
Можно ли изменить отступы или стиль скобок?
Нет, у форматтера нет параметров: он всегда использует два пробела и размещает открывающую скобку в строке селектора. Благодаря этому результаты для всех таблиц стилей единообразны.
Почему результат заключен в блок кода css?
Результат возвращается в виде блока кода Markdown с пометкой css, поэтому в Markdown он отображается с подсветкой синтаксиса. Скопируйте строки между разделителями в свой файл .css.
Какого размера может быть моя таблица стилей?
До 5 MB за один запуск; более крупный ввод отклоняется с сообщением. Результат идентичен варианту CSS форматтера кода.