Минификация и форматирование CSS
Вставьте таблицу стилей, чтобы уменьшить её для продакшена или оформить читаемо, и посмотрите, сколько байтов вы сэкономили.
Работает полностью в браузере
- Было
- 0
- Стало
- 0
- Изменение
- 0%
Ввод до 10 МБ. Удаляются только пробелы и комментарии; правила не объединяются, значения не переписываются, неиспользуемый CSS не удаляется.
Как минифицировать или отформатировать CSS
- Вставьте CSS в поле или нажмите Вставить пример.
- Выберите Минифицировать, чтобы сжать, или Форматировать, чтобы оформить с вашим отступом. При минификации включите или отключите сохранение лицензионных комментариев.
- Проверьте сэкономленный размер, затем скопируйте результат или скачайте его как файл
.css.
Минификация CSS без поломок
Минификация таблицы стилей — это удаление всего, что браузер игнорирует: комментариев, отступов, переносов строк и пробелов вокруг знаков препинания. Файлы меньшего размера быстрее загружаются и разбираются, а для большой таблицы стилей экономия до сжатия нередко составляет от четверти до половины размера. Правила и их порядок остаются точно такими, как были написаны.
Сложность в том, чтобы понять, какие пробелы браузер игнорирует. Пробел между двумя селекторами, как в nav a, — это комбинатор, означающий «любой потомок», поэтому nav a и nava — разные вещи. Внутри calc(1rem + 2px) пробелы вокруг + обязательны, а calc(1rem+2px) недопустимо. Текст в кавычках и внутри url() — это данные, а не синтаксис. Минификатор на регулярных выражениях часто ошибается в чём-то из этого; здесь таблица стилей читается как последовательность токенов, а пробелы удаляются только там, где грамматика делает их необязательными.
Форматирование — обратное направление: одно объявление на строку, с отступом внутри фигурных скобок, так что минифицированный файл с CDN превращается в то, что можно читать и сравнивать.
Советы
- Приводите в порядок целую страницу, а не только таблицу стилей? Используйте «Форматирование HTML».
- Подбираете цвета для таблицы стилей? «Конвертер цветов и проверка контрастности» переведёт HEX в RGB, HSL и другие форматы.
- Посмотрите, что именно изменила минификация, сравнив обе версии в инструменте «Сравнить тексты».
Вопросы и ответы
Загружается ли мой CSS?
Нет. Минификация выполняется в вашем браузере, а библиотека форматирования загружается с этого сайта, только если вы выберете «Форматировать». Ваша таблица стилей никуда не отправляется.
Что именно меняет минификация?
Она удаляет комментарии и пробелы вокруг фигурных скобок, точек с запятой, запятых и комбинаторов (>, ~, +), а также последнюю точку с запятой в каждом блоке. Пробел сохраняется в a b (комбинатор потомка), в and (min-width: ...) и вокруг + и - внутри calc(), clamp(), min() и max(), где его удаление сломало бы значение.
Затрагивает ли она строки и url()?
Нет. Всё внутри кавычек, включая текст, похожий на комментарий или скобку, и содержимое url() копируется символ в символ.
Сокращает ли она цвета или числа?
Нет. Значения вроде #336699, 0.5em и 0px остаются как написаны. Такие замены дают мало и несут некоторый риск, поэтому удаляются только пробелы и комментарии.
Как убедиться, что минифицированный CSS безопасен?
После каждого запуска страница разбирает ваш исходный CSS и результат собственным CSS-парсером браузера и сравнивает прочитанное. Если они различаются, над результатом появляется уведомление. Совпадение означает, что браузер видит одни и те же правила.
Что такое лицензионные комментарии?
Комментарии, начинающиеся с /*!, минификаторы по традиции сохраняют, потому что в них указаны авторские права или текст лицензии, которые лицензия может требовать сохранять. Отключите параметр, чтобы удалить и их.