Онлайн-форматтер и минификатор CSS: отступы 2 или 4 пробела, табуляция, сортировка свойств, удаление комментариев и дублей. Размер до и после, всё в браузере.
Вставьте CSS — здесь появится размер до и после для обоих режимов
| Повторных свойств убрано | — |
|---|---|
| Пустых правил удалено | — |
| Комментариев убрано | — |
| Объявлений переставлено | — |
| Точек с запятой снято | — |
Вставьте CSS — здесь появится отчёт о правках
| Строковых литералов | 0 |
|---|---|
| Скобок внутри строк — не в структуре | 0 |
| Комментариев | 0 |
| Скобок внутри комментариев — не в структуре | 0 |
| Структурных скобок | { 0 · } 0 |
Фигурных скобок внутри строк и комментариев не встретилось, структурные скобки сбалансированы. Проверить защиту разбора можно на примере: в нём есть и content: "}", и строка, похожая на комментарий.
CSS читают двое. Браузеру всё равно, стоит ли объявление на своей строке: пробелы, переводы строк и комментарии он выбрасывает ещё до каскада. Человеку наоборот — в сжатом файле, где полторы тысячи правил идут одной строкой, нельзя ни найти нужный блок, ни понять, чем одно правило отличается от соседнего. Форматирование и минификация переводят один и тот же код в ту запись, которая нужна сейчас: читаемую для правки и компактную для отдачи в сеть.
Отдельная задача — убрать из файла то, что уже ничего не делает: повторные объявления внутри правила, пустые блоки, оставшиеся после удаления свойств. В каскаде CSS побеждает объявление, стоящее ниже, поэтому первое из двух одинаковых — мёртвый код, но глазами его не найти на сотне правил. Инструмент убирает повторы и пустые правила и показывает отчёт: в каком правиле, какое свойство, что было и что осталось. Всё это правки, которые не меняют вид страницы, — в отличие от, например, перестановки свойств с разной важностью, которую инструмент не делает.
Разбор идёт по дереву, а не по символам, и это главное отличие от поиска по тексту. Строка content: "}" и комментарий /* } */ содержат закрывающую скобку, и любой поиск по символам примет их за конец правила — результат развалится ровно на том файле, где такая строка встретилась. Понимает инструмент и остальное, что встречается в живом CSS: пользовательские свойства и var(), вложенные правила, ат-правила @media, @supports, @font-face и @keyframes. Считается всё в браузере: код не отправляется на сервер и не сохраняется.
Вставьте код в поле «Исходный CSS» — результат появится сразу в поле справа, нажимать ничего не нужно. Отступ задаётся в настройках: два пробела, четыре или табуляция. Если код пришёл одной длинной строкой, сначала включите режим «Форматировать», а если наоборот, нужно отдать файл поменьше — «Минифицировать». Разбор идёт по мере ввода, поэтому результат и отчёт об изменениях всегда соответствуют тому, что сейчас в поле, и расходятся с ним не могут.
Только записью, значения не меняются: форматирование расставляет переводы строк и отступы, чтобы структуру было видно глазами, минификация убирает пробелы между объявлениями, пробелы вокруг запятых и скобок, точку с запятой перед закрывающей скобкой и сжимает пробел перед !important. Экономия обычно 30–50%: чем больше отступов и комментариев в исходнике, тем заметнее. Точные числа показывает таблица размеров — там видны оба режима сразу, вместе с размером исходника и разницей в процентах, посчитанной по байтам UTF-8, то есть ровно по объёму будущего файла.
Флажок «Убирать повторные свойства» оставляет последнее объявление, а предыдущие удаляет — в каскаде CSS побеждает то, что стоит ниже, поэтому первое из двух и есть мёртвый код. В отчёте ниже видно, что именно убрано и что осталось, с указанием правила: color: #1a1a1a → color: #2f6fed. Есть исключение: если важность у объявлений разная, не удаляется ни одно. В паре color: red !important; color: blue побеждает красный, но если important когда-нибудь снимут, порядок снова начнёт решать, — поэтому такие объявления инструмент сохраняет оба.
По алфавиту свойства идут от background к z-index: такой порядок удобен, когда два файла сравнивают между собой, — одинаковый набор свойств записан одинаково и различия видны сразу. По смыслу свойства собираются группами: сначала пользовательские переменные, затем раскладка (display, position, flex, grid), размеры и отступы, типографика, оформление и в конце анимация. Внутри группы порядок алфавитный, поэтому результат для одного набора свойств всегда один и тот же. Сортировка переставляет только объявления — вложенные правила остаются на своих местах, а вместе с ними и порядок каскада.
Нет. Инструмент не ищет скобки по тексту, а разбирает CSS в дерево: строковый литерал вроде content: "}" и комментарий /* } */ читаются целиком, поэтому закрывающей скобкой блока они не считаются. Регулярные выражения на таком файле ошибаются — они видят `}` и обрывают правило, — и именно поэтому здесь свой разбор. Убедиться можно на примере: в нём есть и content: "}", и строка, похожая на комментарий. В панели «Разбор строк и скобок» видно, сколько скобок стоит внутри строк и комментариев и сколько осталось в структуре, а также сбалансированы ли они.
Нет, это флажок: пока он выключен, комментарии переезжают в результат вместе с кодом. При включённом флажке убираются обычные комментарии, но остаются лицензионные — те, что начинаются с /*! . Их сохраняют при сборке намеренно, и молча выбросить копирайт было бы худшей ошибкой чистки: заметить её потом нечем. Число убранных комментариев показано в отчёте об изменениях. Исходный текст при этом не портится: правки идут в результат, а не в поле ввода.
Нет. Разбор, чистка и сборка вывода выполняются в браузере на JavaScript: содержимое файла никуда не передаётся, не сохраняется и не попадает в логи. Проверить это можно так: откройте инструмент, отключите интернет и продолжите работу — обработка идёт точно так же. Это важно, когда в стилях лежат адреса внутренних сервисов или фирменные переменные. Обратная сторона в том, что при обновлении вкладки введённое пропадёт — историю сайт не ведёт, поэтому результат лучше скопировать сразу.