Utilore

Форматирование CSS

Вставьте таблицу стилей — пусть даже она пришла одной строкой — и прочитайте её заново. Каждое объявление получает свою строку, вложенные блоки — свой отступ, комментарии остаются на месте.

Код никуда не уходит: форматирование идёт в браузере.

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

  1. Вставьте CSS в первое поле.
  2. Выберите отступ: два пробела, четыре или табуляция.
  3. Скопируйте результат или нажмите «Минифицировать», чтобы сжать обратно.

Полезно знать

Почему наивный форматтер ломает стили

Резать по каждой точке с запятой и каждой скобке кажется рабочим приёмом ровно до тех пор, пока в файле не встретится content: "a;b" или data-URI с SVG внутри url(). И то и другое в настоящем CSS — обычное дело. Здесь файл читается посимвольно, поэтому строки в кавычках и комментарии переносятся целиком, а не рубятся на первом же знаке.

Вложенность, от которой есть польза

Медиазапросы, блоки supports и современные вложенные правила добавляют по уровню, и отступ следует за ними. Правила верхнего уровня разделяются пустой строкой, поэтому таблица на две тысячи строк читается как список блоков, а не как стена текста.

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

Сохраняются ли комментарии?

Да. Отдельный комментарий занимает свою строку; комментарий после объявления остаётся при нём.

Меняет ли он мой CSS?

Ни одно свойство не переименовывается, не переставляется и не удаляется. Двигаются только пробелы — стили работают ровно как прежде.

Код уходит на сервер?

Нет. Всё выполняется в браузере, поэтому таблица стилей закрытого проекта остаётся у вас.

А SCSS или LESS?

Вложенные правила и комментарии форматируются нормально. Переменные, миксины и управляющие директивы проходят как есть — их не разбирают, но и не портят.

Похожие инструменты