Инструменты разработчика

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

Сократите CSS-текст, удалив комментарии, пробельные символы и пробелы вокруг выбранных знаков.

Запустить инструмент

Минификатор CSS сокращает текст таблицы стилей за счет последовательности заданных текстовых преобразований. Вставьте CSS в поле ввода, чтобы удалить блочные комментарии, переносы строк и лишние пробельные символы вокруг фигурных скобок, точек с запятой, двоеточий и запятых. Оставшиеся повторяющиеся пробельные символы заменяются одиночным пробелом, а пробелы в начале и конце всей строки отсекаются. Точка с запятой непосредственно перед закрывающей фигурной скобкой также удаляется. Например, запись «.card { color: #333; }» преобразуется в компактный фрагмент «.card{color:#333}», а комментарий «/* базовые стили */» полностью исчезает. Для непустого текста инструмент показывает длину исходной строки, длину преобразованной строки, их разницу в символах и процент сокращения объема, округленный до одного знака после запятой. Пустой или содержащий только пробелы ввод возвращает пустую строку со значениями длины, равными нулю. Обязательно проверьте итоговый CSS в проекте перед заменой рабочего файла.

Инструкция

  1. Вставьте CSS-текст в поле «CSS».
  2. Запустите обработку и изучите преобразованный текст.
  3. Сравните длины исходной и преобразованной строк, разницу и процент сокращения.
  4. Проверьте результат в проекте перед заменой исходной таблицы стилей.

Примеры

  • :root { color: #222; margin: 0 16px; } /* базовые стили */
  • /* блок карточки */ .card { padding: 16px; margin: 0 0 12px; color: #333; }

Частые вопросы

Какие изменения вносит минификатор?

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

Что произойдет при пустом вводе?

Пустая строка или строка, содержащая только пробельные символы, даст пустой результат. Размеры исходной и преобразованной строк будут равны нулю.

Какие показатели доступны после обработки?

Для непустого CSS отображаются длина исходной строки, длина результата, разница между ними и процент сокращения, округленный до одного знака после запятой.

Почему результат нужно проверить?

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

Встроить этот инструмент

Добавьте рабочий инструмент SmartPlusLab на свой сайт с помощью кода ниже.