Минификация CSS

Вставьте таблицу стилей и заберите сжатую. Счётчик под полем показывает размер до и после — сразу видно, стоило ли оно того.

Код никуда не уходит: форматирование идёт в браузере.

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

  1. Вставьте CSS в первое поле — он сжимается по ходу ввода.
  2. Сравните размеры под полем ввода.
  3. Скопируйте результат или нажмите «Форматировать», чтобы снова его прочитать.

Полезно знать

Что удаляется

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

Почему строки не трогают

Точка с запятой внутри content: "a;b" и скобка внутри data-URI с SVG для регулярного выражения выглядят как структура. Минификаторы на шаблонах ломают такие файлы молча, и ущерб обнаруживается пропавшей иконкой уже на бою. Здесь таблица читается посимвольно, а строки в кавычках переносятся целиком.

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

Стили продолжат работать так же?

Да. Ничего не переименовывается, не переставляется и не выбрасывается — уходят только пробелы и комментарии, а они на применение правил не влияют.

Насколько уменьшится файл?

Написанная руками таблица обычно теряет двадцать–тридцать процентов. После gzip разница гораздо меньше: сжатие и так справляется с повторяющимися пробелами.

Код уходит на сервер?

Нет. Всё происходит на странице, и для ещё не опубликованных стилей это важно.

Можно ли потом снова его прочитать?

Нажмите «Форматировать» — таблица разложится по одному объявлению на строку. Исходных комментариев уже нет, но все правила на месте.

Похожие инструменты