инструмент для разработчиков / 16

Форматтер и улучшатель CSS

Форматируйте, выравнивайте и разворачивайте правила CSS, списки селекторов и объявления свойств в удобочитаемый код.

Форматтер и улучшатель CSS: TOEA разбирает правила CSS, медиазапросы и объявления свойств, выравнивая пробелы вокруг свойств и отступы в блоках. Работает на 100% локально в вашем браузере, файлы на сервер не загружаются.

Категория: Инструменты для разработчиков
Запуски: В вашем браузере
Стоимость: Бесплатно · без регистрации
Доступность: Готово к использованию

Форматирование и выравнивание CSSЛокальная обработка

Полностью работает в браузере

Отформатированный CSS-код

body {
  font-family: system-ui,sans-serif;
  line-height: 1.5;
  color: #333;
  margin: 0;
}

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 2rem;
  background: #f8f9fa;
}

.header a {
  color: #0066cc;
  text-decoration: none;
}

.header a:hover {
  text-decoration: underline;
}

@media (max-width:600px) {
  .header {
    flex-direction: column;
    padding: 1rem;
  }
}

Как читать чужую таблицу стилей

Форматирование минифицированного файла делает его читаемым, но не возвращает исходный вид: минификаторы объединяют правила и меняют порядок объявлений, поэтому ожидайте сгруппированные селекторы и сокращённые значения. Чтобы определить, какое правило оформляет элемент, быстрее использовать инструменты разработчика браузера; их панель Sources также умеет форматировать минифицированный файл на месте. Отформатируйте две версии таблицы стилей и сравните их в проверке различий, чтобы увидеть изменения после обновления.

Что форматирование не меняет

Форматтер добавляет отступы и пробелы, но не сортирует свойства, не исправляет их названия с опечатками, не добавляет vendor-префиксы и не удаляет повторяющиеся объявления, поэтому colour: red остаётся без изменений. Последовательности пробелов сворачиваются везде, в том числе внутри строк в кавычках, поэтому проверяйте значения content, где важны несколько пробелов. Когда файл будет готов к публикации, снова сожмите его с помощью CSS-минификатора.

Как пользоваться

Вставьте необработанный или минифицированный код CSS.
Выберите отступы в 2 или 4 пробела.
Нажмите «Форматировать CSS», затем скопируйте или скачайте результат.

Конфиденциальность и ограничения

Всё форматирование CSS выполняется локально в вашем браузере.

Часто задаваемые вопросы

Поддерживает ли инструмент медиазапросы @media?

Да, вложенные at-правила и медиазапросы форматируются с правильными отступами.

Изменяет ли инструмент коды цветов или селекторы?

Нет, форматирование изменяет пробелы, отступы и структуру, не затрагивая значения свойств.

Бесплатный инструмент · запусков: в вашем браузере · аккаунт не нужен