Minificator și formator CSS

Ce este acest instrument?

Un minificator CSS rescrie o foaie de stiluri pentru a fi cât mai mică posibil, fără să schimbe cum se randează: elimină comentarii și spații albe, scurtează valorile de culoare și unitățile zero acolo unde este sigur, combină regulile duplicate și elimină punctele și virgulele redundante.

Acest instrument este construit pe clean-css, un optimizator CSS care de fapt analizează foaia de stiluri într-un AST, nu folosește regex, motiv pentru care poate gestiona în siguranță cazuri limită care strică minificatoarele naive — proprietățile personalizate CSS (--main-color: ...), conținutul din interiorul șirurilor și selectorii și media queries complexe ies toate corecte.

De ce să-l folosești?

• Minificare bazată pe AST (clean-css), nu regex — sigură cu proprietăți personalizate, șiruri și media queries imbricate.
• Optimizările de nivel 2 combină și simplifică regulile pentru economii suplimentare, dincolo de simpla eliminare a spațiilor albe.
• Vezi exact câți bytes și ce procent ai economisit.
• Modul Format transformă o foaie de stiluri minificată înapoi în CSS lizibil, cu indentare consistentă.
• Procesare 100% locală — stilurile proprietare sau nelansate nu părăsesc niciodată browserul tău.

Cum se folosește

1. Lipește CSS-ul tău în câmpul de intrare, sau apasă „Încarcă exemplu” pentru a încerca un mostră cu o proprietate personalizată și un media query.
2. Apasă „Minifică” pentru a-l comprima, sau „Formatează” pentru a-l înfrumuseța cu indentare de 2 spații.
3. Verifică mesajul de sub casete — modul minify arată reducerea de dimensiune; CSS-ul invalid arată o eroare clară, nu produce silențios rezultate defecte.
4. Apasă „Copiază” pentru a prelua rezultatul.

Exemplu

Intrare

:root {
  --main-color: #4f46e5;
}

.card {
  color: var(--main-color);
  padding: 16px;
}

@media (max-width: 600px) {
  .card {
    padding: 8px;
  }
}

Rezultat

:root{--main-color:#4f46e5}.card{color:var(--main-color);padding:16px}@media (max-width:600px){.card{padding:8px}}

Proprietatea personalizată, media query-ul și ordinea cascadei sunt toate păstrate — doar spațiile albe, comentariile și caracterele redundante sunt eliminate.

Sfaturi practice

• Minifică la momentul build/deploy, nu în timpul dezvoltării — editează sursa lizibilă și lasă acest instrument (sau pipeline-ul tău de build) să producă versiunea livrată.
• Dacă depanezi de ce o pagină arată diferit în producție, formatarea mai întâi a CSS-ului minificat face diferența față de sursa ta mult mai ușor de citit.
• Proprietățile personalizate supraviețuiesc minificării, deci foile de stiluri bazate pe token-uri de design (folosind --spacing, --color-*, etc.) sunt sigure de trecut prin acest instrument.
• Combină cu minificatoarele HTML și JS de mai jos, dacă proiectul tău păstrează totul în fișiere separate înainte de o lansare.

Unde se încadrează în fluxurile de lucru reale

CSS este unul dintre lucrurile cu impact mai mare de minificat, deoarece foile de stiluri blochează randarea implicit — fiecare byte tăiat dintr-o foaie de stiluri poate reduce puțin timpul până la prima afișare, mai ales pe conexiuni mai lente. Este un câștig mai mic decât optimizarea imaginilor, dar este esențialmente gratuit odată conectat într-un pas de build.

Direcția Format este utilă pentru problema opusă: inspectarea unei foi de stiluri de producție a unui concurent sau legacy, livrată minificată, pentru a-i înțelege structura înainte de a scrie o suprascriere sau o redesenare.

→ Minificator HTML · Minifier JS

Cazuri de utilizare frecvente

• Micșorarea unei foi de stiluri înainte de a publica un site static sau o pagină de destinație.
• Reformatarea unui fișier CSS minificat preluat de pe un site live, pentru a-i studia structura.
• Curățarea CSS-ului exportat dintr-un instrument de design, care include adesea comentarii și spații albe excesive.
• Verificarea rapidă dacă un fragment CSS scris manual se analizează corect, deoarece CSS-ul malformat apare ca o eroare explicită.

Întrebări frecvente