CSS минификатор

CSS минификатор, это бесплатный инструмент, который удаляет из CSS лишние символы и возвращает минифицированную таблицу стилей вместе с количеством символов до и после обработки.

Что делает минификация CSS?

Минификация CSS сокращает количество символов в таблице стилей, удаляя форматирование, которое не требуется браузерам. Обычно это отступы, переносы строк, комментарии и необязательные пробелы возле знаков пунктуации.

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

Минификация полезна перед публикацией, при анализе слишком объёмного стороннего CSS или для оценки того, сколько места занимает форматирование, используемое при разработке. Не путай её с оптимизацией, которая удаляет неиспользуемые селекторы, объединяет равнозначные правила или переписывает объявления. Этот инструмент не заявляет, что выполняет такие расширенные операции.

Как пользоваться CSS минификатором?

Вставь таблицу стилей в поле CSS и запусти инструмент. Затем скопируй результат из поля Минифицированный CSS в нужный процесс сборки или публикации. Сохрани читаемый исходный CSS и не заменяй его навсегда минифицированной копией.

1. Возьми исходный CSS, который используется на сайте или в приложении.
2. Перед минификацией убедись, что он разбирается без ошибок.
3. Вставь код в поле CSS и запусти инструмент.
4. Сравни значения Символы CSS и Символы минифицированного CSS.
5. Проверь результат на тестовой странице, включая адаптивные состояния, стили для печати и интерактивные компоненты.

Минификация CSS выполняется на сервере. Отправленный CSS передаётся на сервер по HTTPS и не сохраняется. Если таблица стилей содержит конфиденциальные URL, внутренние имена хостов или другие чувствительные данные, подумай, соответствует ли отправка этих данных любому серверному инструменту правилам их обработки в твоей организации.

Как читать результат?

В результате отображаются преобразованный CSS и два значения количества символов, поэтому можно сразу проверить код и увидеть, насколько он сократился. Символы CSS показывает длину отправленного текста, а Символы минифицированного CSS показывает его длину после минификации.

Количество символов вычисляется функцией, которая учитывает многобайтовые символы. Не воспринимай эти значения как точный прогноз размера данных при передаче по сети. Символы UTF-8 могут занимать больше одного байта, а сжатие Brotli или gzip способно существенно изменить размер данных, отправляемых по HTTP.

У инструмента не указано отдельное поле для проверки кода или вывода ошибок, поэтому его нельзя считать валидатором CSS. Распространённые проблемы, например непарные фигурные скобки, пропущенное двоеточие, незакрытая строка, некорректный комментарий или недопустимая вложенность, нужно искать с помощью инструментов разработчика в браузере, линтера или валидатора, учитывающего стандарты. Некорректный CSS после обработки может выглядеть компактно, но работать не так, как задумано.

Простые примеры минификации CSS

При обычной минификации удаляется форматирование, а само правило сохраняется.

CSS

p { color: red; }

Минифицированный CSS

p{color:red}

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

CSS

.notice, .warning { color: #c00; margin: 0 1rem; }

Минифицированный CSS

.notice,.warning{color:#c00;margin:0 1rem}

Удалять все пробелы без разбора небезопасно. Пробел может обозначать комбинатор потомка, а для арифметических операторов в функциях вроде calc() действуют требования к пробелам. Строки, URL с данными, экранированные идентификаторы и значения пользовательских свойств также требуют обработки с учётом синтаксиса.

В строках, а с учётом правил для идентификаторов CSS и в селекторах, могут встречаться символы с диакритическими знаками и символы нелатинских алфавитов. Числа, десятичные точки, проценты и единицы измерения являются частью синтаксиса, а не декоративным текстом. Их нельзя просто сокращать без понимания объявления. В пустой таблице стилей нет CSS, который можно минифицировать. Очень большие таблицы стилей обычно удобнее обрабатывать минификатором во время сборки. Такой процесс проще повторять и проверять, чем каждый раз копировать текст в онлайн-форму.

Когда минификация CSS не имеет смысла?

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

• Не форматируй, а затем не минифицируй заново CSS, который будет читать только браузер или система сборки.
• Не используй минификацию вместо удаления неиспользуемых правил фреймворка или повторяющихся объявлений.
• Не рассчитывай, что уменьшение количества символов поможет обнаружить запросы, блокирующие отрисовку, проблемы с кешем или медленную загрузку шрифтов.
• Не удаляй отформатированный исходный код, особенно если приходится отлаживать специфичность, каскадные слои или медиазапросы.

Если CSS собирается автоматически, добавь минификатор в этот процесс, чтобы каждый выпуск создавался с одинаковыми настройками. Если связанные ресурсы публикуются вручную, HTML минимизатор и JS минификатор помогут выполнить аналогичную обработку для соответствующих типов файлов.

Часто задаваемые вопросы

Меняется ли специфичность селекторов после минификации CSS?

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

Можно ли минифицировать пользовательские свойства CSS?

Пользовательские свойства можно минифицировать, однако в их значениях могут сохраняться токены и пробелы для последующей подстановки через var(). Проверяй объявления с вычислениями, резервными значениями или встроенными строками в браузерах, которые поддерживает проект. Не считай любой видимый пробел необязательным.

Создаёт ли инструмент карту исходного кода?

Нет, в результатах инструмента карта исходного кода не указана. Если при отладке рабочей версии нужно сопоставлять компактный CSS с Sass, Less или другим исходником, создавай минифицированный файл и карту исходного кода в компиляторе или сборщике, которому известна первоначальная структура файлов.

Сохраняются ли в результате комментарии с лицензией?

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

Может ли минификация исправить неработающий CSS?

Нет. Минификация удаляет лишние символы, но не исправляет некорректный селектор, неподдерживаемое свойство, отсутствующий ресурс или ошибки в каскаде. Сначала устрани предупреждения синтаксического анализа и визуальные проблемы в исходном коде.

Что проверить перед публикацией

Сохрани минифицированный результат как отдельный ресурс для рабочей среды, убедись, что URL и содержимое в кавычках не изменились, а затем загрузи его на тестовой странице с открытой консолью браузера. Проверь типичные страницы при узкой и широкой области просмотра. После этого убедись, что сервер применяет ожидаемый тип содержимого, нужную политику кеширования и HTTP-сжатие.