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

Что такое Минификатор CSS?

Минификатор сжимает таблицы стилей с помощью CSSO — структурного оптимизатора. Помимо удаления пробелов и комментариев он сокращает значения (#ff0000 → red, 0px → 0), объединяет повторяющиеся правила и убирает избыточные объявления там, где это не меняет результат.

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

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

Пример

a { color: #ff0000; margin: 0px 0px; } /* c */

a{color:red;margin:0}

Когда использовать Минификатор CSS

Используйте для боевых сборок небольших сайтов, встроенных блоков <style> и CSS, хранящегося в CMS. Если ваша сборка уже использует сборщик с cssnano/lightningcss, продолжайте им пользоваться. Лицензионные комментарии при необходимости сохраните вручную.

Как работает Минификатор CSS

Сначала быстрая проверка просматривает скобки, строки и комментарии и сообщает о несбалансированных блоках с позицией. Затем CSS передаётся в csso.minify с включённой реструктуризацией: CSSO разбирает его в AST (css-tree), применяет безопасное сжатие значений и объединение правил и печатает результат без пробелов. Комментарии удаляются, включая лицензионные /*! … */.

Распространенные Случаи Использования

• ✓ Минификация отдельной таблицы стилей для лендинга
• ✓ Уменьшение критического CSS перед встраиванием
• ✓ Сжатие CSS, хранящегося в базе данных или CMS
• ✓ Сравнение размера оптимизированного CSS с исходным

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

Что сделать дальше

Другие категории