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

Новое

Уменьшайте размер CSS, убирая комментарии и лишние пробелы.

Mode

Level

Comments

Drag & drop a .css file, or click to browse

—Original

—Minified

— Saved

—Gzipped

Input

Output

Runs entirely in your browser. Nothing is uploaded.

Минификация и сжатие CSS в одном месте

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

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

Что удаляется — и что никогда не трогается

При минификации CSS инструмент удаляет комментарии, сворачивает все пробелы, убирает пробелы вокруг символов вроде { } : ; , > + и удаляет последнюю точку с запятой перед каждой закрывающей фигурной скобкой. Включите режим Агрессивный, и инструмент также удалит ведущие нули (0.5em → .5em) и единицы измерения у нулевых значений (0px → 0).

Принципиально важно, что процесс безопасен. Строки в кавычках, значения url() и выражения calc() защищаются до любого удаления, поэтому значение вроде calc(100% - 2rem) сохраняет необходимые пробелы, а путь к фоновому изображению никогда не ломается. Многие быстрые онлайн-минификаторы ошибаются с calc() — этот не ошибается.

Минификация или форматирование — настоящий двусторонний инструмент

Нужно прочитать таблицу стилей, сжатую в одну строку? Переключитесь в режим Форматировать, чтобы разминифицировать CSS: инструмент снова расставит отступы, поместит каждое объявление на собственную строку, добавит пробел после каждого двоеточия и аккуратно расположит списки селекторов. Выберите отступ 2 пробела, 4 пробела или табуляцию — в соответствии со стилем вашего проекта.

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

Сравнение с cssminifier.com, CleanCSS и cssnano

cssminifier.com — самый популярный онлайн-вариант, но он загружает ваш код на свои серверы. Для проприетарных таблиц стилей — клиентских проектов, неопубликованных дизайнов, внутренних инструментов — это реальный риск. CleanCSS и cssnano — библиотеки Node.js: отлично подходят для автоматизированных пайплайнов, но недоступны без локальной установки. Минификатор CSS freeformatter.com и TopTal тоже работают на стороне сервера.

Этот инструмент обрабатывает всё локально с помощью JavaScript — ничего не загружается. Покрывает самые распространённые оптимизации минификации (пробелы, комментарии, точки с запятой, нулевые единицы, ведущие нули) и добавляет оценку gzip в том же шаге. Без аккаунта, без загрузки, без установки — работает на iPhone, Android, Mac, Windows и Linux.

Смотрите на сэкономленные байты — включая gzip

Заметная панель статистики показывает исходный размер, размер вывода и сэкономленные байты и процент, чтобы вы всегда точно знали, насколько уменьшился ваш CSS. Размеры измеряются в реальных байтах UTF-8, а не в количестве символов, что соответствует тому, что ваш сервер фактически отдаёт.

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

100% конфиденциально — ничто не покидает ваш браузер

Каждая минификация и форматирование выполняется локально в вашем браузере с помощью JavaScript. Ваш CSS никогда не загружается, не регистрируется и не хранится, что делает этот инструмент безопасным местом для сжатия проприетарных, неопубликованных или клиентских таблиц стилей. Регистрация не требуется, и нет никаких ограничений, кроме памяти вашего устройства. Работает офлайн — как только страница загружена, отключите интернет, и минификатор продолжит работать. Добавьте этот онлайн-минификатор CSS в закладки и используйте всякий раз, когда нужно сжать CSS, уменьшить файл или прочитать минифицированный стиль.

Frequently asked questions

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

Минификация CSS удаляет каждый символ, который не нужен браузеру — пробелы, табуляции, переносы строк, комментарии, последнюю точку с запятой в каждом блоке — не изменяя при этом поведение стилей. Например, '.btn {\n color: #ffffff;\n margin: 0px;\n}' (около 48 байт) минифицируется до '.btn{color:#ffffff;margin:0}' (28 байт). Результат отображения идентичен. Минификация — стандартный шаг в любом рабочем процессе веб-производительности, потому что меньшие файлы загружаются и разбираются быстрее.

Зачем минифицировать CSS?

Меньшие таблицы стилей означают меньше байт по сети, что приводит к более быстрой загрузке, более быстрой первой отрисовке контента (FCP) и лучшим Core Web Vitals — особенно на мобильных соединениях. Рукописная таблица стилей на 60 КБ после минификации обычно уменьшается до примерно 45 КБ, и ещё значительно меньше после gzip-сжатия сервером. Этот инструмент полезен для разовых таблиц стилей, CSS тем WordPress, стилей HTML-писем или всего, что находится за пределами вашего обычного сборочного пайплайна.

Что удаляется в процессе минификации?

Удаляются пробельные символы (пробелы, табуляции и переносы строк), комментарии, последняя точка с запятой перед каждой закрывающей фигурной скобкой и пробелы вокруг символов вроде { } : ; , > +. В агрессивном режиме также удаляются ведущие нули ('0.5em' становится '.5em') и единицы измерения у нулевых значений ('0px' становится '0'). Строки, значения url() и выражения calc() никогда не трогаются, поэтому ваш контент и динамические значения остаются корректными.

Насколько меньше становится минифицированный CSS?

Как чистый текст, минификация обычно экономит 10–30%. В сочетании с gzip или Brotli на сервере общее сокращение обычно составляет 70–80%. Практический пример: таблица стилей 100 КБ становится примерно 75 КБ после минификации, затем около 18 КБ после gzip — посетители загружают лишь малую долю оригинала. Этот инструмент показывает минифицированный размер, оценку gzip и точные сэкономленные байты рядом друг с другом.

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

С этим инструментом — да, потому что он работает на 100% в вашем браузере с помощью JavaScript. Ваш CSS никогда не отправляется на сервер, не регистрируется и не хранится, поэтому даже проприетарные или клиентские таблицы стилей остаются полностью на вашем устройстве. Вы можете убедиться в этом, минифицируя при отключённой сети: инструмент всё равно работает. Напротив, cssminifier.com и минификатор CSS freeformatter.com загружают ваш код на свои серверы, что является реальной угрозой конфиденциальности.

Можно ли сохранить комментарии с лицензией (/*! */) при минификации?

Да. Оставьте включённой опцию «Сохранять лицензионные комментарии /*! */», и любой комментарий, начинающийся с /*! — конвенция, которую бандлеры и библиотеки используют для лицензионных баннеров — переживёт минификацию, тогда как обычные комментарии /* */ будут удалены. Если вы хотите сохранить все комментарии, включите «Сохранять все комментарии». Это важно при распространении библиотек с открытым исходным кодом, где лицензия должна оставаться в минифицированном файле.

Можно ли минифицировать .css файл или только вставленный код?

Оба варианта. Вставьте CSS в поле ввода или перетащите .css файл в зону перетаскивания (или нажмите, чтобы найти файл). Минифицированный результат можно скопировать одним кликом или скачать как style.min.css; отформатированный вывод скачивается как style.css. Перетаскивание работает в браузерах на компьютере; на мобильных (iPhone, Android) используйте выбор файла для загрузки из приложения «Файлы».

Удобные коды символов в десятичном, шестнадцатеричном, восьмеричном и двоичном виде.

Разработка