Перейти к основному содержанию
iotools.cloudiotools.cloud

Минификатор и Красивый Форматер CSS

Минифицируйте CSS для уменьшения размера таблицы стилей или отформатируйте обратно в читаемый, отступный код. Строки, значения url() и комментарии /*! bang сохраняются, а пробелы внутри calc() никогда не разрываются.

Ввод

Drop a file or browse
One file · text
Или

Настройки

Комментарии /*! … */ bang всегда сохраняются.

Вывод

Результат
Это было полезно?

Другие способы использовать этот инструмент

REST API

curl -X POST https://api.iotools.cloud/v1/tool/css-minifier-beautifier \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "css": "body {\n  color: red;\n}\n\n@media screen and (min-w…",
    "mode": "minify",
    "indent": "2",
    "keepComments": ""
  }'

Подставьте свой собственный ключ из аккаунта. Поля инструмента — это тело запроса, без обёртки.

Спросите у ИИ-агента

Use the IOTools `css-minifier-beautifier` tool (CSS Minifier & Beautifier) on this input:

YOUR_INPUT_HERE

Вставьте это любому агенту, подключённому к MCP-серверу IOTools, и добавьте свой ввод.

Виджет для встраивания

<iframe
  src="https://iotools.cloud/embed/css-minifier-beautifier/"
  width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
  title="Минификатор и Красивый Форматер CSS — iotools.cloud"
  sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
  allow="clipboard-write"
  style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>

Вставьте это на свою страницу — бесплатно, без ключа, нужна лишь обратная ссылка.

Стоимость вызова API/MCPОт 5 кредитов
Нужно больше кредитов?Посмотреть тарифы

Также доступно через

ИнтеграцииРасширение для браузераРасширение для VS Code

Руководства

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

Как использовать

  1. Вставьте ваш CSS в поле ввода или загрузите файл .css.
  2. Выберите Формат:
    • Минифицировать — все в минимальное количество байтов.
    • Минифицировать, но сохранить разрывы строк — минифицированные объявления, одно правило на строку. Полезно, когда вы все еще хотите сравнить выходные данные или прочитать трассировку стека против них.
    • Красивый формат — переформатируйте и разверните таблицу стилей. Выберите 2 пробела, 4 пробела или табуляции.
  3. Скопируйте результат или загрузите как файл .css.

Результат обновляется по мере ввода текста. Ничего не отправляется никуда — см. примечание о конфиденциальности ниже.

Что минификация действительно удаляет

Комментарии и каждая последовательность пробельных символов, которая CSS грамматика не может потребовать. Объявления становятся color:red, последний ; перед } удаляется, !important теряет свой начальный пробел, а комбинаторы селектора затягиваются (a > b + i становится a>b+i).

То, что инструмент сознательно не трогает, одинаково важно:

  • Строки остаются идентичными по байтам. content: "/* not a comment */" это строка, не комментарий, и выводится неизменной.
  • Значения url() непрозрачны — включая неквотированные URI data: с ; и ,, которые наивный минификатор регулярных выражений разрезал бы пополам.
  • calc() сохраняет свои пробелы. calc(100% - 10px) действительно; calc(100%-10px) это синтаксическая ошибка. Пробелы вокруг + и - внутри значения критичны и сохраняются.
  • Комбинаторы потомков выживают. p :first-child (каждый первый потомок внутри p) не то же самое, что селектор p:first-child (a p, который является первым потомком). Пробел между ними сохраняется.
  • Комментарии /*! … */ bang сохраняются, что является обычным способом обозначения заголовков лицензии.

Он переименовывает классы или переписывает мои свойства?

Нет. Это минификатор пробелов и комментариев, а не оптимизатор. Он не будет объединять дублирующиеся правила, удалять пустые, сокращать #ffffff до #fff или переупорядочивать что-либо. Результат всегда таблица стилей, которая ведет себя точно как входные данные — меньший результат никогда не стоит молча менять то, что делает ваш CSS.

На сколько меньше будет мой CSS?

Обычно на 20–35% на написанном вручную CSS, в основном из-за отступа и комментариев. Уже минифицированный CSS почти не изменится. Служба результата с gzip или brotli сжатием дает вам гораздо больше, чем минификация, поэтому делайте оба.

Могу ли я развернуть минифицированную таблицу стилей?

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

Почему мое пустое правило осталось?

Потому что удаление правил это структурное изменение, а инструмент работает только с пробелами и комментариями. .unused {} безвредно; если вы хотите его удалить, удалите его в исходнике.

Мой CSS загружается куда-то?

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

cssminifierbeautifierformattercompressweb

Нравятся инструменты? Уберите рекламу.

Один платёж навсегда убирает всю рекламу с вашего аккаунта. Без подписки, без слежки.

Убрать рекламу