Форматировать CSS онлайн
Вставьте сжатые или неаккуратные стили — инструмент расставит отступы и переносы, не меняя селекторы и значения. Результат можно скопировать или скачать как .css.
- Ровные отступы
- Селекторы не меняются
- Копирование и скачивание
- Работает в браузере
Как отформатировать CSS
Вставьте стили
Скопируйте CSS в поле или откройте .css с устройства. Пример уже загружен: карточка с цветом, отступами и состоянием наведения.
Нажмите «Форматировать»
Правила разбиваются на строки, свойства выстраиваются с отступом, а вложенные блоки становятся читаемыми. Значения и порядок свойств сохраняются.
Скопируйте или скачайте
Результат копируется одной кнопкой или скачивается файлом formatted.css. Для минификации есть отдельная кнопка — она убирает пробелы и переносы.
Зачем форматировать CSS
Сжатые стили из сборки или чужого файла трудно читать: правила идут одной строкой, а свойства теряются. Форматтер разбивает их на блоки, и становится видно, какие свойства относятся к селектору, а где начинается медиазапрос. Это помогает найти лишнее правило или опечатку в значении.
Форматирование не меняет смысл: селекторы, значения, порядок свойств и комментарии остаются прежними. Меняются только пробелы и переносы, поэтому файл можно безопасно возвращать в проект.
Что меняется
| Было | Стало |
|---|---|
| .card{color:#fff;padding:16px} | .card { color: #fff; padding: 16px; } |
| a:hover{color:red} | a:hover { color: red; } |
| @media(max-width:600px){.card{padding:8px}} | @media (max-width: 600px) { .card { padding: 8px; } } |
Когда нужна минификация
- Перед публикацией, чтобы уменьшить размер файла.
- Для вставки стилей в один HTML-документ.
- Для сравнения размера двух версий таблицы стилей.
- Для проверки, что форматирование обратимо и ничего не потерялось.
- Для чтения сжатого файла из сборки или чужого проекта.
- Перед ревью, чтобы коллеге было проще читать изменения.
Где ещё пригодится
Полный редактор кода подсвечивает CSS, подсказывает свойства и форматирует файл прямо в папке проекта. Разметку удобно проверить в редакторе HTML, а ответы API — в форматтере JSON. Если нужно понять, что изменилось между двумя версиями стилей, используйте сравнение текстов.
Форматирование помогает и при разборе чужого кода: сжатый файл из сборки становится понятным, а лишние правила и дубликаты видны сразу же. Сравнить две версии стилей можно в сравнении текстов, а готовую разметку проверить в редакторе HTML.
Вопросы и ответы
Форматирование меняет стили?
Нет. Меняются только пробелы и переносы строк: селекторы, свойства, значения и комментарии остаются как были. Поэтому отформатированный файл можно возвращать в проект без опасений. Комментарии и порядок правил сохраняются, значения тоже остаются прежними. Формат можно применять к файлу сколько угодно раз — результат не изменится.
Поддерживаются ли вложенные правила и медиазапросы?
Да. Вложенные блоки, медиазапросы, ключевые кадры и комментарии форматируются с правильными отступами. Порядок правил сохраняется. Неизвестные at-правила и пользовательские свойства проходят без изменений, что важно для современных стилей. Длинные селекторы остаются в одной строке, а объявления переносятся под них. Так проще найти нужное правило.
Чем это отличается от минификации?
Форматирование добавляет отступы для чтения, а минификация убирает лишние пробелы и переносы. Обе операции не меняют значения и доступны на одной странице. Форматирование нужно для чтения и ревью, минификация — для публикации; переключение занимает один клик. Для этого не нужно загружать файл заново.
Нужна ли регистрация?
Нет. Инструмент открывается сразу и работает в браузере. Вход нужен только для хранения файлов в облаке, а здесь достаточно вставить текст и скачать результат. Файлы с устройства открываются и скачиваются без входа, а история на сервере не хранится. Пробных периодов тоже нет.
Отправляется ли CSS на сервер?
Нет. Разбор и перестановка отступов идут в этой вкладке, поэтому стили не покидают устройство. Результат скачивается файлом или копируется в буфер. Запроса к серверу и временного файла нет: стили разбираются в этой вкладке. Результат существует только здесь, пока вы его не скачаете.
Можно ли открыть .css с компьютера?
Да, кнопка «Открыть файл» выбирает таблицу стилей с устройства. После форматирования файл скачивается под именем formatted.css, а исходный остаётся на месте. Исходный файл остаётся нетронутым, а отформатированная копия получает отдельное имя. Ничего не перезаписывается на диске. Стили можно сразу вернуть в проект.
Другие инструменты
Форматировать CSS онлайн
Сжатый CSS превращается в читаемые правила с ровными отступами.
Открыть редактор