Preskoči na sadržaj
1001 Tools
en
Alati za programere

CSS minifikacija

Nalepite svoj CSS i dobijte minifikovanu verziju sa uklonjenim komentarima i nepotrebnim razmacima, uz broj bajtova pre i posle da vidite uštedu. Radi u potpunosti u vašem pregledaču — ništa se ne šalje — i namerno ostavlja razmake unutar calc() i stringova netaknutim da vaši stilovi nastave da rade.

Minifikovan CSS
Podeli FacebookXLinkedInWhatsAppViber

Kako radi

Minifikator uklanja /* komentare */, sažima nizove razmaka i uklanja razmake oko strukturnih znakova poput vitičastih zagrada, tačka-zapeta, dvotačaka, zapeta i kombinatora deteta. Takođe izbacuje suvišnu poslednju tačku-zapetu pre svake zatvarajuće zagrade. Rezultat je CSS manji bajt po bajt koji se prikazuje identično.

Namerno je konzervativan. Stringovi i url() vrednosti se zaštite pre nego što se bilo šta ukloni, pa značajni razmaci u njima opstaju. Razmaci oko +, - i ~ se nikada ne diraju, što čuva calc() izraze poput calc(100% - 20px) i kombinatore susedstva. Ne preimenuje klase, ne spaja pravila niti menja redosled svojstava — to zahteva potpun CSS parser i može uvesti suptilne greške, pa se ovaj alat drži bezbednog smanjenja veličine bez gubitaka.

Primeri iz prakse

Ručno pisan stil

Stil od 12 KB pun komentara i uvlačenja pada na oko 8–9 KB kada nestanu razmaci i komentari — tipično smanjenje od 25–35% bez vizuelne promene.

Ubacivanje snippeta u inline blok stilova

Treba da nalepite CSS u šablon mejla ili <style> tag i želite da bude kompaktan. Minifikujte ga prvo da markap ostane mali i uredan.

Provera šta pravilo zaista sadrži

Minifikacija sažima razuđeno pravilo u jednu liniju, pa je lako okom proveriti svaku deklaraciju pre nego što je potvrdite.

Česta pitanja

Da li minifikacija menja izgled mojih stilova?

Ne. Uklanjaju se samo komentari i nepotrebni razmaci. Deklaracije, selektori i vrednosti ostaju netaknuti, pa je prikazani rezultat identičan originalnom CSS-u.

Da li će pokvariti calc() izraze?

Ne. Razmaci oko +, - i ~ se namerno čuvaju, pa calc(100% - 20px) ostaje ispravan. Mnogi naivni minifikatori ovo pogreše; ovaj ostavlja te operatore na miru.

Da li se sadržaj stringova i url() čuva?

Da. Stringovi pod navodnicima i url() vrednosti se zaštite pre uklanjanja razmaka, pa se značajni razmaci u content: "…" ili putanji url-a čuvaju tačno.

Koliko će mi fajl biti manji?

Obično 20–40% za ručno pisan CSS sa komentarima i uvlačenjem. Već kompaktan ili framework-generisan CSS se manje smanjuje. Broj bajtova pre i posle pokazuje tačan rezultat za vaš unos.

Da li preimenuje klase ili spaja duplirana pravila?

Ne. Uklanja samo komentare i razmake. Preimenovanje i spajanje pravila zahtevaju potpuno parsiranje CSS-a i razumevanje vašeg markapa, što rizikuje kvarove, pa su van opsega ovde.

Mogu li da minifikujem SCSS ili LESS?

Tek nakon što se kompajlira u običan CSS. Ovaj alat radi na CSS sintaksi; funkcije preprocesora poput promenljivih, ugnežđavanja i miksina moraju se prvo kompajlirati.

Da li je minifikovan CSS reverzibilan?

Ne automatski — minifikacija odbacuje komentare i formatiranje, koji se ne mogu povratiti. Sačuvajte svoj izvor; koristite CSS formater ako treba da minifikovan CSS ponovo učinite čitljivim.

Da li obrađuje medijske upite i keyframes?

Da. Ugnežđeni blokovi poput @media i @keyframes minifikuju se na isti način, jer alat radi na strukturnim znakovima, a ne na konkretnim at-pravilima.

Da li se moj CSS igde šalje?

Ne. Minifikacija se u potpunosti izvršava u vašem pregledaču pomoću JavaScript-a. Ništa se ne šalje na server, i radi van mreže kada se stranica učita.

Srodni alati