CSS Minifikator i Formatter

Što je ovaj alat?

CSS minifier prepisuje stylesheet da bude što manji, a da se pritom ne mijenja kako se prikazuje: uklanja komentare i razmake, skraćuje vrijednosti boja i nulte jedinice gdje je to sigurno, spaja duplicirana pravila i uklanja suvišne točke-zarez.

Ovaj alat izgrađen je na clean-css, CSS optimizatoru koji stylesheet stvarno parsira u AST umjesto da koristi regex, zbog čega sigurno obrađuje rubne slučajeve koji bi naivne minifikatore slomili — CSS custom svojstva (--main-color: ...), sadržaj unutar stringova te složeni selektori i media queryji svi izlaze ispravno.

Zašto ga koristiti?

• Minifikacija temeljena na AST-u (clean-css), a ne regexu — sigurna s custom svojstvima, stringovima i ugniježđenim media queryjima.
• Level 2 optimizacije spajaju i pojednostavljuju pravila za dodatnu uštedu izvan običnog uklanjanja razmaka.
• Vidite točno koliko ste bajtova i koliko posto uštedjeli.
• Format mode pretvara minificirani stylesheet natrag u čitljiv CSS s dosljednim uvlačenjem.
• 100% lokalna obrada — vlasnički ili neobjavljeni stilovi nikad ne napuštaju vaš preglednik.

Kako ga koristiti

1. Zalijepite svoj CSS u ulazni okvir ili kliknite "Load Example" da isprobate primjer s custom svojstvom i media queryjem.
2. Kliknite "Minify" za sažimanje ili "Format" za uljepšavanje s uvlačenjem od 2 razmaka.
3. Provjerite poruku ispod okvira — minify mode prikazuje smanjenje veličine; nevažeći CSS prikazuje jasnu grešku umjesto da tiho proizvede pokvareni izlaz.
4. Kliknite "Copy" da preuzmete rezultat.

Primjer

Ulaz

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

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

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

Izlaz

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

Custom svojstvo, media query i redoslijed kaskade sačuvani su u cijelosti — uklonjeni su samo razmaci, komentari i suvišni znakovi.

Praktični savjeti

• Minificirajte u fazi builda/deploya, ne tijekom razvoja — uređujte čitljivi izvor i neka ovaj alat (ili vaš build pipeline) proizvede verziju koja se objavljuje.
• Ako otkrivate zašto stranica u produkciji izgleda drukčije, prvo formatirajte minificirani CSS pa je usporedbu s izvorom mnogo lakše čitati.
• Custom svojstva preživljavaju minifikaciju, pa su stylesheeti temeljeni na design tokenima (koji koriste --spacing, --color-* itd.) sigurni za prolazak kroz ovaj alat.
• Kombinirajte s HTML i JS minifikatorima ispod ako projekt sve drži u zasebnim datotekama prije objave.

Gdje se ovo uklapa u stvarne radne procese

CSS je jedna od stavki s višom vrijednošću za minifikaciju jer stylesheetovi po zadanome blokiraju renderiranje — svaki uklonjeni bajt sa stylesheeta može skratiti vrijeme do prvog prikaza, posebno na sporijim vezama. To je manja dobit nego optimizacija slika, ali je u biti besplatna kad se jednom ugradi u build korak.

Smjer Format koristan je za suprotan problem: pregled konkurentskog ili starog produkcijskog stylesheeta koji je objavljen minificiran, kako biste razumjeli njegovu strukturu prije pisanja override-a ili redizajna.

→ HTML Minifikator · JS Minifier

Uobičajeni slučajevi upotrebe

• Smanjivanje stylesheeta prije objave statičnog sitea ili landing stranice.
• Preformatiranje minificirane CSS datoteke preuzete s live sitea radi proučavanja strukture.
• Čišćenje CSS-a izvezenog iz alata za dizajn, koji često sadrži prekomjerne komentare i razmake.
• Brza provjera parsira li se ručno pisan CSS isječak ispravno, jer se pogrešan CSS pokaže kao eksplicitna greška.

Često postavljana pitanja