Форматтер использует сканер с учетом синтаксиса, а не делит текст вслепую по фигурным скобкам и точкам с запятой. Он отслеживает строки, комментарии, функции, селекторы атрибутов и вложенные блоки. Поэтому знаки внутри URL или значения в кавычках остаются без изменений.
Форматирование CSS онлайн
Работает прямо в браузере - без загрузки файлов и регистрации.
Исходный CSS
Отформатированный CSS
Вставьте CSS для форматирования
Как отформатировать CSS онлайн?
Форматтер CSS превращает минифицированную таблицу стилей или код с неровными отступами в понятный текст с единообразными переносами строк. Вставьте CSS, выберите два пробела, четыре пробела или табуляцию, затем скопируйте либо скачайте результат. Обработка идет в браузере и сохраняет комментарии, строки в кавычках, URL данных и порядок объявлений.
Как пользоваться
- 1Вставьте CSS. Добавьте в поле ввода таблицу стилей, блок селекторов или фрагмент минифицированного CSS.
- 2Выберите отступы. Укажите два пробела, четыре пробела или табуляцию. Результат обновляется прямо во время ввода.
- 3Проверьте состояние. Посмотрите счетчики структуры или исправьте указанную непарную скобку, незакрытый комментарий либо строку.
- 4Скопируйте или скачайте. Скопируйте отформатированный CSS в буфер обмена или сохраните файл под именем formatted.css.
Кому пригодится
- Фронтенд-разработчикам, которым нужно развернуть производственный CSS для удобной проверки и отладки.
- Ревьюерам кода, которые приводят отступы к одному виду перед сравнением скопированной таблицы стилей или фрагмента пул-реквеста.
- Студентам, которым так проще разобраться во вложенных медиазапросах, селекторах и блоках объявлений.
- Командам поддержки и тестирования, которые очищают CSS из инструментов разработчика перед добавлением в задачу или сценарий воспроизведения.
Вопросы и ответы
Форматтер CSS бесплатный?
Да. Можно форматировать столько CSS, сколько способен обработать браузер на вашем устройстве. Регистрация и установка не нужны, ограничений по числу запусков нет, а результат появляется сразу.
Мой CSS отправляется на сервер?
Нет. Форматирование выполняется локально в браузере. Вставленный CSS остается в редакторе страницы и не передается никакому API, поэтому здесь можно работать со стилями закрытых проектов.
Какой объем CSS можно отформатировать?
У инструмента нет фиксированного лимита символов. Для очень больших сгенерированных таблиц важны память и производительность устройства, но обычные стили сайтов, компонентов и писем обрабатываются мгновенно.
Форматирование меняет работу CSS?
Меняются только пробелы и переносы строк. Селекторы, объявления, комментарии, строки в кавычках и их порядок сохраняются. Перед публикацией все же проверьте результат, особенно если используются экспериментальный синтаксис или необычные последовательности, чувствительные к пробелам.
Инструмент проверяет свойства CSS?
Нет. Он проверяет парность фигурных, квадратных и круглых скобок, а также закрытие комментариев и строк. Корректность каждого свойства, значения или браузерной возможности следует проверять отдельным валидатором CSS по стандартам.
Можно форматировать медиазапросы и вложенный CSS?
Да. Блоки внутри правил @media, @supports, @container, @layer и @keyframes получают отступ по глубине вложенности. Современные вложенные селекторы также форматируются без изменения строк и аргументов функций.