Минификация и форматирование CSS - сжать или развернуть

Минификатор и форматировщик CSS

Что делает этот инструмент

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

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

  1. 1 Вставьте CSS: целый файл или одно правило.
  2. 2 Нажмите «Минифицировать», чтобы сжать, или «Форматировать», чтобы развернуть с отступами.
  3. 3 Проверьте объём и скопируйте результат.

Пробел в селекторе это не украшение

«.a .b» выбирает .b внутри .a; «.a.b» выбирает элемент с обоими классами. Это разные селекторы, и минификатор, считающий пробел лишним, молча красит не те элементы. Здесь пробел между двумя частями селектора сохраняется всегда, убирается только пробел вокруг комбинаторов вроде > и +.

calc() нуждается в своих пробелах

В «calc(100% - 10px)» пробелы вокруг минуса требует сама грамматика: без них браузер читает «-10px» как отрицательную длину, выражение становится недопустимым и всё объявление выбрасывается. Никто вас не предупредит, вёрстка просто окажется неправильной. Этот инструмент никогда не убирает пробелы внутри скобок.

Лицензионные комментарии остаются

Комментарий, начинающийся с /*!, несёт указание об авторских правах или лицензии, и по соглашению любой минификатор его сохраняет. Убрать его значит стереть атрибуцию, которую библиотека просит распространять вместе с ней. Обычные /* комментарии написаны для вас и вашей команды, поэтому они уходят.

Минификация CSS даёт меньше, чем gzip

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

Минификация CSS - частые вопросы

Убираются только пробелы и обычные комментарии, а три места, где пробел несёт смысл - селекторы, скобки и строки - остаются нетронутыми. Ничего не переименовывается, не переставляется и не сливается, поэтому браузер видит ровно те правила, что вы написали.

Самые популярные инструменты разработчика

Популярное сегодня
JSON форматтер Форматируйте, сжимайте и проверяйте JSON прямо в браузере. Ошибка указывается по строке и столбцу, а дерево показывает структуру.

Связанные инструменты разработчика

JSON форматтер Форматируйте, сжимайте и проверяйте JSON прямо в браузере. Ошибка указывается по строке и столбцу, а дерево показывает структуру.
Формат HTML Расставьте отступы в запутанном HTML, чтобы его читать, или сожмите его. Работает и с фрагментами, а разметку не переписывает.
Формат XML Расставьте отступы в запутанном XML или сожмите его. Понимает RSS, CDATA и пространства имён и никогда не переписывает ваш документ.
{translate.mini_sqlfmt_title_174} {translate.sqlfmt_description_174}

Другие инструменты, которые могут вам понравиться

Word в PDF Конвертируйте Word в PDF бесплатно: загрузите DOC, DOCX, ODT или RTF и скачайте аккуратно свёрстанный PDF за считаные секунды.
PDF в Word Конвертируйте PDF в Word бесплатно: загрузите PDF и скачайте редактируемый DOCX за секунды - без регистрации и водяных знаков.
Счетчик слов Бесплатный счётчик слов: вставьте текст, чтобы узнать число слов, символов, предложений и абзацев, а также время чтения. Текст остаётся в браузере.
Счетчик символов Бесплатный счётчик символов: символы с пробелами и без, слова и строки, а также проверка SEO-лимитов для заголовков и описаний.
Проверка плотности ключевых слов Бесплатный анализ плотности ключевых слов: вставьте текст или ссылку и посмотрите частоту каждого слова и фразы в процентах.