Besplatni CSS Minifikator: Komprimiraj i Optimiraj CSS Kod Online

Što je minifikator CSS-a?

Minifikator CSS-a alat je koji smanjuje datoteku CSS-a (kaskadnih stilskih predložaka) uklanjanjem znakova koji preglednicima nisu potrebni. Uklanja komentare, dodatne razmake i prijelome redaka te skraćuje neke uobičajene obrasce, a da se izgled stranice ne promijeni. Rezultat je manja datoteka koju preglednik može brže preuzeti i analizirati.

Kako funkcionira minifikacija CSS-a

Web-programeri pišu CSS s komentarima, uvlakama i praznim redcima jer ti elementi olakšavaju čitanje i uređivanje koda. Preglednici zanemaruju svo to oblikovanje. Minifikator ga briše, zajedno s još nekoliko bajtova koji nemaju vizualnu svrhu, i ostavlja kompaktnu datoteku namijenjenu uporabi u produkciji, a ne uređivanju.

Ovaj alat primjenjuje sljedeće promjene:

• Uklanja komentare. Briše se svaki blok /* ... */.
• Sažima razmake. Nizovi razmaka, tabulatora i prijeloma redaka između pravila svode se na ništa ili na jedan razmak ondje gdje je razmak značajan, primjerice između .parent i .child u selektoru potomka.
• Uklanja razmake oko interpunkcije. Uklanjaju se razmaci uz znakove {, }, :, ; i ,.
• Uklanja suvišne točke-zareze. Uzastopne točke-zarezi svode se na jednu, a završna točka-zarez ispred zatvarajuće zagrade } uklanja se.
• Skraćuje heksadekadske boje. Boja sa šest znamenki kao što je #ffffff postaje #fff kada se svaki par znamenki podudara (crvena, zelena i plava). Boja s osam znamenki i alfa-kanalom, poput #ffaa00cc, skraćuje se na isti način kada se podudaraju sva četiri para.
• Uklanja jedinicu iz vrijednosti duljine nula. 0px, 0em i 0rem postaju 0. Postotne vrijednosti ostavljaju se nepromijenjenima jer 0% nije uvijek zamjenjivo s običnim 0, primjerice u koraku flex-basis ili @keyframes.
• Uklanja početnu nulu iz decimalnih brojeva. 0.5 postaje .5.

Kako bi se spriječilo oštećenje datoteke, alat ne mijenja tri vrste sadržaja: tekst unutar navodnika, vrijednost unutar nespremničkog url() i sadržaj matematičkih funkcija kao što su calc(), clamp(), min() i max(). Razmaci unutar calc(100% - 20px) važni su pregledniku, pa ih alat čuva točno onakvima kakvi jesu.

Alat ne spaja jednake selektore, ne briše prazne blokove pravila i ne pretvara boje rgb() u heksadekadski zapis. To su valjane optimizacije koje izvode drugi alati, ali ovaj se minifikator usredotočuje na gore navedene promjene.

Formula za postotak smanjenja

Alat prikazuje za koliko se datoteka smanjila, izraženo u postocima:

Obje duljine broje se u znakovima. Rezultat se zaokružuje na dvije decimale.

Primjer s rješenjem

Izvorni CSS (193 znakova):

Minificirani izlaz (129 znakova):

Primjenom formule: (193 − 129) / 193 × 100 = 33,16 %. Komentar je uklonjen, uvlake i prijelomi redaka su uklonjeni, 0px postao je 0, a #ffffff/#000000 postali su #fff/#000.

Točan postotak ovisi o ulazu. Čvrsto napisan CSS s malo komentara manje se smanjuje. CSS s mnogo komentara i dubokim uvlačenjem može se smanjiti više. Kod uobičajenih stilskih predložaka minificiranih ovim alatom smanjenje je približno od 20 % do 40 %.

Kako se služiti ovim alatom

1. Zalijepite CSS-kod u polje za unos s lijeve strane.
2. Minificirana se inačica automatski pojavljuje s desne strane, bez gumba koji treba pritisnuti.
3. Provjerite postotak smanjenja prikazan iznad izlaza.
4. Odaberite „Copy to Clipboard” za kopiranje minificiranog CSS-a, a zatim ga zalijepite u projektnu datoteku.
5. Odaberite „Clear” za brisanje oba polja i novi početak.

Ništa što se upiše u alat ne šalje se na poslužitelj; minifikacija se izvodi u pregledniku.

Kada minificirati CSS

Razvojni timovi obično minificiraju CSS kao korak u procesu izgradnje, služeći se alatima kao što su Webpack ili npm-skripte, tako da se promjena automatski izvrši prije svake implementacije. Čitljiva datoteka izvornog koda s komentarima ostaje u sustavu za kontrolu verzija; minificira se samo produkcijska izgradnja. Uobičajena mjesta uporabe minificiranog CSS-a uključuju:

• Velike web-stranice, poput internetskih trgovina, na kojima manji stilski predložak znači brže učitavanje stranice.
• Jednostranične aplikacije izrađene okvirima kao što su React ili Vue, u kojima se CSS uključuje zajedno s JavaScriptom.
• Mobilne web-stranice, na kojima je vjerojatnije da korisnici imaju sporiju vezu.
• HTML poruke e-pošte, koje često imaju stroga ograničenja veličine.

Minifikacija CSS-a i brzina stranice

Manja se datoteka CSS-a brže preuzima i analizira, što može skratiti vrijeme do prikaza stranice. Google je naveo da je brzina stranice jedan od signala koji se upotrebljavaju pri rangiranju u pretraživanju, pa brža stranica može biti jedan mali čimbenik među mnogima koji utječu na uspješnost web-stranice u rezultatima pretraživanja. Sama minifikacija ne jamči promjenu rangiranja; ona je samo jedna od nekoliko optimizacija, uz kompresiju slika i vrijeme odgovora poslužitelja.

Minifikator CSS-a nasuprot alatu za formatiranje CSS-a

Minifikator sažima kod za produkciju. Alat za formatiranje radi suprotno: uzima sažeti CSS i ponovno ga oblikuje dodavanjem uvlačenja i prijeloma redaka kako bi ga osoba mogla čitati. Alat za formatiranje ne može vratiti komentare ni izvorne nazive varijabli koji su uklonjeni tijekom minifikacije jer se ti podaci brisanjem gube.

Često postavljana pitanja

Za koliko se CSS smanji nakon minifikacije? Ovim alatom obično od 20 % do 40 %, ovisno o broju komentara, praznih redaka i uvlaka u izvornoj datoteci. Datoteka s malo oblikovanja na početku smanjit će se manje.

Mijenja li minifikacija CSS-a izgled stranice? Ne. Minifikacija samo uklanja znakove koje preglednici zanemaruju, poput komentara i suvišnih razmaka, te prepisuje nekoliko jednakovrijednih vrijednosti, primjerice #ffffff u #fff. Prikazana stranica ostaje ista.

Treba li minificirati CSS tijekom razvoja? Ne. Tijekom pisanja i ispravljanja koda zadržite čitljivu inačicu s komentarima. Minificirajte samo kopiju koja se šalje na produkcijski poslužitelj, obično kao automatski korak u procesu izgradnje.

Može li se minificirani CSS pretvoriti natrag u izvornu datoteku? Alat za formatiranje može ponovno oblikovati minificirani CSS dodavanjem uvlačenja, ali ne može vratiti obrisane komentare ni obnoviti opisne nazive koji nisu postojali u minificiranoj inačici. Sačuvajte izvornu datoteku.

Pretvara li ovaj alat boje rgb() u heksadekadski zapis ili spaja jednake selektore? Ne. Skraćuje heksadekadske boje i uklanja nepotrebne znakove, ali ne prepisuje vrijednosti rgb()/hsl() niti spaja ponovljene selektore. Neki drugi minifikatori izvode te dodatne korake.

Je li minifikacija isto što i kompresija gzipom? Ne. Minifikacija uklanja nepotrebne znakove iz samog izvornog koda. Kompresiju gzipom (ili Brotli) primjenjuje web-poslužitelj pri slanju datoteke, služeći se zasebnim algoritmom. Zajednička uporaba obaju postupaka daje najmanju datoteku tijekom prijenosa mrežom.