Форматирование CSS онлайн для читаемого кода

Введение

Минифицированный или вручную ужатый CSS браузер скачивает быстро, а человек читает с трудом: всё слипается, ни переносов строк, ни отступов, а обычно и без комментариев. Форматирование делает обратное минификации: берёт CSS в этом сжатом виде и восстанавливает переносы, пробелы и отступы, которые возвращают ему читаемость, не меняя при этом, что именно делает каждое правило. Это важно всякий раз, когда в CSS нужно заглянуть человеку, а не браузеру: чтобы разобраться, проверить или найти внутри конкретное правило.

Как инструмент форматирует ваш CSS

Вставьте CSS, нажмите «Форматировать» — и код перестроится по одному правилу на блок: каждый селектор на своей строке, под ним с отступом его свойства, по одному в строке. Сами значения свойств — цвета, единицы, сокращённые записи — остаются ровно такими, какими вы их вставили; меняются только пробелы и структура. Про обработку селекторов и значений стоит знать две подробности:

• Сгруппированные селекторы остаются вместе. Правило с несколькими селекторами через запятую, например .card, .card-highlight, .card-featured { ... }, сохраняется одной строкой селекторов, а не разбивается по строке на каждый, как делают некоторые форматировщики.
• Значения с двоеточием обрабатываются правильно. Разделителем между свойством и значением считается только первое двоеточие в объявлении, поэтому значение, внутри которого двоеточие тоже есть — чаще всего это веб-адрес вроде background: url(http://example.com/img.png) —, не обрывается не в том месте.

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

Что стоит знать до использования

Инструмент хорошо справляется с простым, плоским CSS — обычным перечнем селекторов и их свойств. У него есть два конкретных ограничения, о которых стоит знать, прежде чем вставлять реальный код:

• Вложенные правила форматируются неверно. Если в вашем CSS есть медиазапрос @media, блок @keyframes или любое правило, вложенное в другой блок, окружающий фрагмент, скорее всего, выйдет спутанным, а не аккуратно выстроенным по отступам. Инструмент восстанавливает структуру, сопоставляя открывающие и закрывающие фигурные скобки пара за парой, и не отслеживает, насколько глубоко внутри другого блока стоит скобка. Поэтому у правила, вложенного в @media, содержимое перемешивается с самим блоком @media вместо того, чтобы остаться должным образом вложенным. Если в вашей таблице стилей есть медиазапросы или ключевые кадры, внимательно проверьте этот участок вывода или отформатируйте версию без вложенных частей.
• Все комментарии удаляются без исключений. В отличие от инструмента CSS Minifier на этом сайте, который сохраняет комментарии, написанные как уведомления о лицензии или авторстве, здешний форматировщик вырезает из вставленного кода каждый комментарий. Если в таблице стилей есть лицензионная шапка, которую нужно сохранить, сделайте её копию заранее.

Ни то ни другое не влияет на то, что делает CSS: сами правила и значения не меняются — речь только о том, какая часть структуры будет верно приведена к читаемому виду.

Когда этот инструмент подходит

• Разобрать чужой минифицированный CSS, чтобы научиться. Таблица стилей настоящего сайта, открытая в инструментах разработчика, часто выглядит как сжатый, нечитаемый CSS — вставив её сюда и отформатировав, можно по-настоящему изучить, как устроены вёрстка или отдельный компонент. Это честная работа с цифровой грамотностью, а не просто прогон собственного кода через инструмент.
• Проверить CSS, который сдал ученик. Код, скопированный между редакторами, иногда теряет исходное оформление; отформатировать его перед чтением — значит быстрее проверить и дать отзыв.
• Разобраться, почему вёрстка не работает. В плотном, неотформатированном CSS труднее выискать правило, из-за которого всё поехало, — сначала отформатировать обычно значит быстрее увидеть настоящую причину.

Если CSS, с которым вы работаете, опирается на @media-запросы или другие вложенные блоки и вам нужно надёжное форматирование, встроенный форматировщик редактора кода подойдёт лучше этого инструмента — смотрите ограничение выше. А для плоской таблицы стилей без вложенных правил — а это немалая часть учебных работ по веб-дизайну — этот инструмент даёт читаемый результат быстро и без установки чего-либо.

Пример

Ученица находит интересным CSS шаблонного сайта и хочет понять, как собрана вёрстка карточек. Живая таблица стилей минифицирована в одну плотную строку, поэтому, прежде чем её вообще можно будет прочитать, она вставляет её сюда и форматирует. Правила расходятся в читаемую структуру, и становится видно, какой селектор отвечает за какую часть вёрстки, как задаются отступы через margin и padding и какие цвета повторяются по всему оформлению. Если в скопированной таблице есть @media-запросы для адаптивного поведения, к этому участку придётся вернуться отдельно — смотрите «Что стоит знать до использования» выше.

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

Меняет ли форматирование то, что делает CSS?

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

Что происходит с комментариями в моём CSS?

Они удаляются. Этот инструмент не сохраняет комментарии о лицензии или авторстве так, как это делает CSS Minifier — сделайте копию заранее, если такой комментарий нужно сохранить.

Правильно ли он отформатирует CSS с медиазапросами?

Надёжно — нет. Правила, вложенные в @media, @keyframes и подобные блоки, могут выйти спутанными; проверьте эту часть вывода или возьмите форматировщик редактора кода для таблиц стилей, где вложенность используется активно.

Можно ли форматировать минифицированный CSS, скопированный с чужого сайта?

Да — это обычный и законный способ разобраться, как устроена страница. Но если вы собираетесь именно использовать этот код, а не только изучить его, посмотрите условия сайта-источника.

Сохраняется ли мой код где-нибудь?

Нет. Вставленный CSS обрабатывается, чтобы выдать отформатированный результат, и после этого не хранится; фиксируется только сам факт обращения к инструменту, а не код.

Разобьёт ли он сгруппированные селекторы на отдельные строки?

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

Какие родственные инструменты есть?

Возьмите CSS Minifier, чтобы снова ужать CSS для продакшена, либо JavaScript Beautifier и HTML Beauty для других задач по форматированию кода.