CSS formater i minifikator

Kako formatirati ili minificirati CSS

1. Zalijepi svoju stilsku tablicu ili klikni Otvori datoteku da učitaš datoteku .css (do 10 MB).
2. Odaberi Uvlačenje (2 razmaka, 4 razmaka ili tabulator) i želiš li Prazan redak između pravila.
3. Klikni Formatiraj (uljepšaj) za čitljiv kôd ili Minificiraj za najmanju verziju.
4. Za minificiranje ostavi označeno Spoji pravila pri minificiranju radi najboljeg rezultata, a Zadrži /*! komentare */ označeno da sačuvaš licencna zaglavlja.
5. Kopiraj ili preuzmi rezultat. Statusni redak prikazuje veličinu prije i poslije, u bajtovima, te postotak uštede.

Ako nedostaje zagrada, alat staje i javlja u kojem se retku nalazi nezatvorena { ili suvišna }, umjesto da izradi neispravan izlaz.

Uljepšavanje: čitljiv i dosljedan CSS

Formatiraj (uljepšaj) koristi js-beautify, formater koji se nalazi u mnogim uređivačima kôda. Svaku deklaraciju stavlja u zaseban redak, uvlači sadržaj svakog pravila i at-pravila poput @media i @supports, svaki selektor iz skupine piše u zasebnom retku i dodaje razmak iza dvotočke u svakoj deklaraciji. Postojeći prazni retci se zadržavaju (najviše jedan zaredom), pa logički odjeljci tvoje datoteke ostaju vidljivi. Formater nikada ne mijenja vrijednosti, redoslijed pravila ni značenje selektora: mijenja samo razmake.

To je korisno za čitanje minificiranog CSS-a s neke web-stranice, za pregled stilske tablice koju je generirao neki alat ili za sređivanje datoteke koju je uređivalo više ljudi s različitim navikama.

Minificiranje: manji CSS pomoću csso-a

Minificiraj koristi csso (CSS Optimizer), strukturni minifikator. Osim uklanjanja razmaka i komentara, prepisuje stilsku tablicu u ekvivalentan, kraći oblik:

• boje se skraćuju (#ff0000 postaje red, #ffffff postaje #fff);
• jedinice i nule se pojednostavljuju (0px postaje 0, 0.5em postaje .5em);
• duplicirane deklaracije se uklanjaju, a skraćena svojstva spajaju kad je to sigurno;
• uz Spoji pravila pri minificiranju pravila s identičnim deklaracijama grupiraju se (a{color:red} b{color:red} postaje a,b{color:red}), a nadjačane deklaracije se odbacuju.

Restrukturiranje je sigurno za uobičajene stilske tablice, ali premješta deklaracije. Ako se tvoj CSS oslanja na vrlo određen redoslijed kaskade, na primjer na hackove za preglednike, isključi opciju: csso će tada samo sažeti svako pravilo na njegovu mjestu.

Komentari se uklanjaju, osim „važnih“ komentara koji počinju s /*!, a obično se koriste za licence. Isključi Zadrži /*! komentare */ da i njih ukloniš.

Veličina prije i poslije

Statusni redak uspoređuje veličinu ulaza i rezultata u UTF-8 bajtovima. Uljepšani kôd obično je veći od izvornika, a minificirani kôd na ručno pisanom CSS-u obično štedi 20 do 50 %. Imaj na umu da poslužitelji datoteke dodatno sažimaju s gzipom ili Brotlijem, pa je ušteda prijenosa manja od sirove brojke, no minificiranje i dalje skraćuje vrijeme obrade i smanjuje veličinu datoteka u predmemoriji.