Как пользоваться
- Вставьте CSS, откройте файл
.cssили начните с примера. - Минифицированный CSS появляется по мере ввода, с размером до и после.
- Скопируйте его или скачайте как
styles.min.css.
Что он делает
Минификатор CSS использует CSSO, который делает больше, чем просто удаляет пробелы и комментарии:
- Сокращает значения:
#ff0000становитсяred,0px—0, аpadding: 0 16px 0 16px—padding: 0 16px. - Объединяет правила с одинаковым селектором и селекторы с одинаковыми объявлениями.
- Удаляет объявления, которые перекрываются более поздними в том же правиле.
Он вносит только те изменения, которые сохраняют смысл таблицы стилей, поэтому страницы выглядят так же.
Стоит ли оно того?
Таблицы стилей не дают странице отобразиться, пока не загрузятся, поэтому меньший CSS — это более быстрая первая отрисовка. Минификация обычно экономит ещё 5–15 % сверх сжатия gzip или Brotli, которое применяет хостинг, а если в таблице много комментариев — больше. Если вы используете инструмент сборки вроде Vite, он уже минифицирует CSS для продакшена; эта страница — для таблиц стилей, которые вы пишете и публикуете вручную.
Частые вопросы
Может ли минификация сломать мой CSS?
Изменения CSSO сохраняют смысл валидного CSS. Хаки, которые для старых браузеров опираются на невалидный синтаксис, могут не уцелеть. Храните читаемую версию как исходник и минифицируйте копию.
Удаляет ли он неиспользуемый CSS?
Нет: он не видит, какие селекторы используют ваши страницы. Это делают при сборке инструменты вроде PurgeCSS.
Как вернуть читаемую версию?
Сохраните оригинал. Форматтер CSS снова расставит отступы в минифицированном CSS, но комментарии потеряны навсегда.
Загружается ли мой CSS куда-то?
Нет. Он минифицируется в вашем браузере.