CSS минификатор

Поставете стилов файл, за да премахнете интервалите и коментарите, да съкратите стойности като #ff0000 → red и да слеете дублирани правила със структурните оптимизации на CSSO.

Работи в браузъраБез регистрацияНищо не се качва

Минифициран резултат

Как да използвате: CSS минификатор

  1. Поставете CSS или отворете файл .css.
  2. Оставете Преструктуриране включено, за да се сливат правила и декларации, или го изключете за безопасно минаване само по празните места.
  3. Оставете Запази лицензните коментари включено, за да запазите бележките /*! … */.
  4. Сравнете оригиналния, минифицирания и gzip размера.
  5. Копирайте резултата или изтеглете output.min.css.

Как работи минифицирането на CSS

Този инструмент използва CSSO (CSS Optimizer), който парсира стиловия файл в синтактично дърво и го отпечатва обратно в най-краткия еквивалентен вид. Освен премахването на интервали и коментари, той прилага безопасни замени на стойности:

  • #ffffff → #fff, #ff0000 → red
  • 0px → 0, 0.90 → .9
  • margin: 8px 16px 8px 16px → margin:8px 16px
  • Празните правила и дублираните декларации се премахват

Какво прави „преструктурирането“?

Преструктурирането анализира целия стилов файл: правила с еднакви декларации се сливат в един списък от селектори (.a,.b{color:red}), а повтарящите се селектори се комбинират. Това често спестява още 5–15% при реални стилови файлове. CSSO слива само когато каскадният ред остава същият, но ако разчитате на необичайни презаписвания, можете да го изключите за чисто синтактично минифициране.

Защо да минифицирате CSS?

CSS блокира рендирането: браузърът не може да изрисува страницата, докато стиловите файлове в <head> не бъдат изтеглени и парсирани. По-малкият CSS означава по-бърз First Contentful Paint и по-добри Core Web Vitals, което помага и на потребителите, и на класирането в търсачките. Комбинирайте минифицирането с gzip или Brotli на сървъра за най-добър резултат.

Често задавани въпроси

Безопасно ли е минифицирането на CSS?
Да. Интервалите и коментарите не влияят на рендирането на CSS, а замените на стойности в CSSO са еквивалентни по спецификация. Преструктурирането запазва каскадния ред; изключете го, ако искате най-консервативния резултат.
Поддържа ли модерен CSS като custom properties, nesting и @layer?
Да. Custom properties (--var), @media, @supports, @layer, @container и grid синтаксисът се запазват.
Мога ли по-късно да върна минифицирания CSS в четим вид?
Минифицираният CSS може да се форматира отново с всеки форматер, но премахнатите коментари не могат да се възстановят. Пазете оригиналния изходен файл и третирайте минифицирания като резултат от билда.
Качва ли се моят стилов файл някъде?
Не. Минифицирането се изпълнява в браузъра ви; нищо не се изпраща към сървър.

Свързани инструменти

JavaScript минификатор Компресира и съкращава имената в JS с Terser, със статистика за размера и gzip. HTML минификатор Премахва коментари и интервали и минифицира вградения CSS/JS. SQL форматер Форматиране или минифициране на SQL за PostgreSQL, MySQL, T-SQL, BigQuery и др. JSON форматер Форматиране, минифициране и валидиране на JSON с грешки по ред/колона.