Приведите таблицу стилей в порядок или минифицируйте её и увидите экономию
Работает в вашем браузере. Ничего из того, что вы вводите, никуда не отправляется.Форматирование расставляет отступы, чтобы таблицу стилей можно было читать, а минификация убирает все пробелы и комментарии для продакшена. Сэкономленные байты показаны, так что выигрыш на файле в 2 KB виден до того, как вы решите. Всё работает в вашем браузере, ничего не загружается.
Эта страница переведена машинным способом с английского оригинала. Перевод ещё не проверен человеком, поэтому ориентируйтесь на английскую версию. Читать английский оригинал
Вставьте таблицу стилей в поле CSS или нажмите «Попробовать пример».
Оставьте «Форматировать» для одного объявления в строке или выберите «Минифицировать» для самого маленького файла.
В режиме «Форматировать» выберите 2 пробела, 4 пробела или Tab в разделе «Отступ».
Нажмите «Копировать» или «Скачать», чтобы забрать результат.
У этого инструмента два режима. «Форматировать» раскладывает таблицу стилей по одному объявлению в строке, с ровными отступами и единообразными пробелами вокруг двоеточий и фигурных скобок. «Минифицировать» удаляет комментарии и пробельные символы, сокращает цвета и единицы и может объединять правила с одинаковым блоком, а затем показывает размер до, размер после и процент экономии.
Он нужен на обоих концах работы. В начале таблица стилей приходит минифицированной из CDN или из сборки, и нужно прочитать правило, которое ломает вёрстку. В конце у вас есть файл, написанный вручную, и нужна самая маленькая версия для публикации. Здесь и то и другое — одна вставка и один щелчок.
Для минификации используется csso. Опция реструктуризации — агрессивная часть: она объединяет правила с одинаковыми блоками, удаляет объявления, которые перекрывает более позднее правило, и меняет порядок там, где это безопасно. Обычно это экономит ещё несколько процентов, а результат равнозначен, но если вы проверяете diff или ваш CSS зависит от порядка в коде так, что инструмент этого не увидит, отключите её — тогда уйдут только пробелы и комментарии. Комментарии, начинающиеся с восклицательного знака, где обычно стоят заголовки лицензий, можно сохранить.
Над результатом показано количество правил, селекторов, объявлений и @-правил. Если фигурная скобка, комментарий или кавычка остались незакрытыми, вы получите строку и столбец, где они начались, и что нужно добавить, а не вывод парсера. Всё работает в браузере, поэтому таблица стилей из неопубликованного проекта никуда не загружается.
Да. Без регистрации, без ограничения размера файла и без лимита на количество таблиц стилей. Страница существует за счёт нескольких объявлений вне инструмента, и они никак не затрагивают ваш результат.
Нет. И форматирование, и минификация выполняются в вашем браузере на JavaScript. Таблица стилей из неопубликованного дизайна или внутренней админки никогда не покидает ваше устройство, и после закрытия вкладки ничего не сохраняется.
Таблица стилей, написанная вручную, с комментариями и отступами, обычно уменьшается на 15–30 процентов, а реструктуризация добавляет ещё пару пунктов за счёт объединения повторяющихся правил. Страница показывает точное число байтов до и после, так что гадать не придётся.
Реструктуризация объединяет правила с одинаковыми блоками, удаляет объявления, которые перекрывает более позднее правило, и меняет порядок селекторов там, где это безопасно. Дополнительная экономия обычно составляет несколько процентов сверх простой минификации. Отключите её, если нужно убрать только пробелы и комментарии, например чтобы получить читаемый diff между двумя сборками.
Да. Выберите «Форматировать» и вставьте минифицированный файл. Он вернётся с одним селектором в строке, одним объявлением в строке и медиазапросами с отступом внутри своего блока. Имена селекторов, значения и порядок остаются точно такими, как были.
Минификация не должна ломать корректную таблицу стилей. csso полноценно разбирает CSS, а не заменяет текст, поэтому строки, data URI и пользовательские свойства сохраняются. Если файл не удаётся разобрать, вы получите строку и столбец вместо сломанного результата, и ничего не будет скопировано.
Всё ещё не получается? Задайте вопрос об инструменте «Форматирование и минификация CSS» и ответить может любой, кто знает. Учётная запись не нужна.