IZN Tools

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

Сжать стили и увидеть, сколько именно сэкономлено.

ВВОД
РЕЗУЛЬТАТ
Ожидание ввода
Посчитано на вашем устройстве

Осознанно консервативен

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

Второй эффективнее и время от времени ломает страницы — обычно из-за взаимодействия в каскаде, которого он не видел, или имени класса, собираемого во время выполнения. Этот — первого рода.

Что в итоге

  • Комментарии — удалены
  • Пробелы между токенами — схлопнуты
  • Пробелы вокруг { } : ; , > ~ + — убраны
  • Последняя ; перед } — убрана

Селекторы, имена свойств, значения, порядок и специфичность остаются нетронутыми.

Где это делать по-настоящему

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

Вопросы

Что именно удаляется?+

Комментарии, цепочки пробелов, пробелы вокруг скобок, двоеточий, точек с запятой и комбинаторов, а также последняя точка с запятой перед закрывающей скобкой. Ничего не переставляется, не объединяется и не переименовывается.

Строки в безопасности?+

Да. Значения content, названия шрифтов с пробелами и пути в url() защищаются до схлопывания пробелов, поэтому строка с точкой с запятой внутри уцелеет без изменений.

Почему экономия меньше ожидаемой?+

Потому что в хорошо написанном CSS изначально мало лишних пробелов, а остаток и так сжимается gzip. Стили с обильными комментариями похудеют заметно, вручную вылизанные — почти нет.

Оптимизирует ли он сам CSS?+

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