Minificator CSS

Lipește o foaie de stil pentru a elimina spațiile albe și comentariile, a scurta valori precum #ff0000 → red și a combina regulile duplicate cu optimizările structurale CSSO.

Rulează în browserFără înregistrareNimic nu este încărcat

Rezultat minificat

Cum se folosește: Minificator CSS

  1. Lipește CSS sau deschide un fișier .css.
  2. Lasă Restructurare activată pentru a combina reguli și declarații sau dezactiveaz-o pentru o trecere sigură, doar pe spațiile albe.
  3. Lasă activat Păstrează comentariile de licență pentru a păstra notițele /*! … */.
  4. Compară dimensiunile originală, minificată și gzip.
  5. Copiază rezultatul sau descarcă output.min.css.

Cum funcționează minificarea CSS

Acest instrument folosește CSSO (CSS Optimizer), care parsează foaia de stil într-un arbore sintactic și o rescrie în cea mai scurtă formă echivalentă. Pe lângă eliminarea spațiilor albe și a comentariilor, aplică rescrieri sigure ale valorilor:

  • #ffffff → #fff, #ff0000 → red
  • 0px → 0, 0.90 → .9
  • margin: 8px 16px 8px 16px → margin:8px 16px
  • Regulile goale și declarațiile duplicate sunt eliminate

Ce face „restructurarea”?

Restructurarea analizează întreaga foaie de stil: regulile cu declarații identice sunt combinate într-o singură listă de selectori (.a,.b{color:red}), iar selectorii repetați sunt uniți. Pe foi de stil reale, asta economisește adesea încă 5–15%. CSSO combină doar când ordinea cascadei rămâne aceeași, dar dacă te bazezi pe suprascrieri neobișnuite o poți dezactiva pentru o minificare pur sintactică.

De ce să minifici CSS?

CSS blochează randarea: browserul nu poate desena pagina până când foile de stil din <head> nu sunt descărcate și parsate. Un CSS mai mic înseamnă un First Contentful Paint mai rapid și Core Web Vitals mai bune, ceea ce ajută atât utilizatorii, cât și pozițiile în căutare. Combină minificarea cu gzip sau Brotli pe server pentru cel mai bun rezultat.

Întrebări frecvente

Este sigur să minifici CSS?
Da. Spațiile albe și comentariile nu influențează randarea CSS, iar rescrierile de valori ale CSSO sunt echivalente conform specificației. Restructurarea păstrează ordinea cascadei; dezactiveaz-o dacă vrei rezultatul cel mai conservator.
Acceptă CSS modern, precum custom properties, nesting și @layer?
Da. Custom properties (--var), @media, @supports, @layer, @container și sintaxa grid sunt păstrate.
Pot de-minifica CSS-ul mai târziu?
CSS-ul minificat poate fi reindentat de orice formatter, dar comentariile eliminate nu pot fi recuperate. Păstrează fișierul sursă original și tratează fișierul minificat ca rezultat de build.
Este foaia mea de stil încărcată undeva?
Nu. Minificarea rulează în browser; nimic nu este trimis la un server.

Instrumente similare