CSS Minifier

Shrink CSS for production instantly

Исходный CSS

Опции

Minified CSS

Обзор

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

Что контролирует этот минификатор
  • •Схлопывание пробелов: минификатор, учитывающий кавычки и комментарии, удаляет пробелы, переносы строк и пустые строки, оставляя содержимое строк нетронутым
  • •Удаление комментариев: удаляйте комментарии /* ... */ или сохраняйте их — например, для заголовка лицензии — с помощью переключателя сохранения комментариев
  • •Оптимизация цвета: сокращение 6-значных hex-цветов и значений rgb() до 3-значной hex-сокращённой формы, где это допускают каналы
  • •Уровень сжатия: обычный режим выполняет безопасную минификацию пробелов, комментариев и цвета; агрессивный режим также удаляет избыточные ведущие нули (0.5px → .5px) и убирает цифры из нулевых значений длины (0px → 0)
  • •Сравнение размера: исходный размер, минифицированный размер и процент уменьшения рядом друг с другом
  • •Скачиваемый результат: сохраните минифицированный результат прямо в виде файла .css
Когда минифицировать CSS
  • •Уменьшение таблицы стилей перед развёртыванием в production для сокращения времени загрузки страницы
  • •Подготовка небольшого фрагмента CSS для встраивания inline в тег <style> или HTML-письмо без раздувания объёма
  • •Быстрая проверка того, насколько сократится таблица стилей, перед настройкой полноценного PostCSS или build-пайплайна
  • •Минификация разовой таблицы стилей для CodePen, gist или статического прототипа, где этап сборки непрактичен
  • •Сравнение минифицированного размера с бюджетом производительности для аудита Core Web Vitals или Lighthouse
Как минифицировать CSS
  1. 1.Вставьте ваш CSS в редактор ввода или загрузите файл .css
  2. 2.Выберите обычное или агрессивное сжатие и решите, сохранять ли комментарии
  3. 3.Минифицированный вывод и процент уменьшения размера появляются автоматически
  4. 4.Скопируйте результат или скачайте его как файл .css
  5. 5.Проверьте количество байт до и после, чтобы подтвердить экономию размера перед развёртыванием
Особые случаи, о которых стоит знать
  • •Агрессивное удаление нулей (0px → 0) безопасно для единиц длины, но пропускает содержимое строк и комментариев и не затрагивает вычисления внутри выражений calc()
  • •Пробелы внутри строк в кавычках — имена font-family, content: "...", пути url() — всегда сохраняются точно; удаляются только структурные пробелы вне строк и комментариев
  • •Этот минификатор не переименовывает классы, не объединяет повторяющиеся селекторы и не удаляет неиспользуемые правила — для этого нужен оптимизатор, интегрированный со сборочным инструментом, например cssnano или PurgeCSS
Ограничения
  • •Это минификация пробелов, комментариев и цвета, а не полная оптимизация — для максимального уменьшения размера (объединение селекторов, удаление повторяющихся правил, устранение неиспользуемого CSS) используйте минификатор, интегрированный со сборочным инструментом, например cssnano или PurgeCSS
  • •Минифицированный вывод полностью теряет читаемость — всегда храните исходный код под контролем версий
  • •Очень большие таблицы стилей могут медленно обрабатываться полностью в браузере — для production build-пайплайнов интегрируйте минификацию в PostCSS или ваш бандлер, а не используйте разовый инструмент в браузере
Нужно конвертировать в обратную сторону?

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

CodingTool официально запущен на

Launched on StartupBaseCodingTool.dev - Free, Fast & Easy Developer Tools in One Place | Product HuntCodingTool - Featured on Startup FameFazier badgeListed on Turbo0Featured on Twelve ToolsFeatured on Findly.tools