CSS formater i minifikator

Kako formatirati ili minifikovati CSS

1. Zalijepi svoj stilski dokument ili klikni Otvori datoteku da učitaš .css datoteku (do 10 MB).
2. Odaberi Uvlačenje (2 razmaka, 4 razmaka ili tabulator) i želiš li Prazan red između pravila.
3. Klikni Formatiraj (uljepšaj) za čitljiv kod ili Minifikuj za najmanju verziju.
4. Za minifikaciju ostavi označeno Spoji pravila pri minifikaciji radi najboljeg rezultata, a Zadrži komentare /*! … */ označeno da sačuvaš zaglavlja s licencama.
5. Kopiraj ili preuzmi rezultat. Red statusa prikazuje veličinu prije i poslije, u bajtovima, te postotak uštede.

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

Uljepšavanje: čitljiv i dosljedan CSS

Formatiraj (uljepšaj) koristi js-beautify, formater koji se nalazi u mnogim uređivačima koda. Stavlja svaku deklaraciju u poseban red, uvlači sadržaj svakog pravila i at-pravila poput @media i @supports, piše svaki selektor iz grupe u poseban red i dodaje razmak iza dvotačke svake deklaracije. Postojeći prazni redovi 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.

Ovo je korisno za čitanje minifikovanog CSS-a s neke web-stranice, za pregled stilskog dokumenta koji je generisao neki alat ili za čišćenje datoteke koju je uređivalo više ljudi s različitim navikama.

Minifikacija: manji CSS pomoću csso

Minifikuj koristi csso (CSS Optimizer), strukturni minifikator. Osim uklanjanja razmaka i komentara, prepisuje stilski dokument 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);
• duplirane deklaracije se uklanjaju, a skraćena svojstva se spajaju kad je to sigurno;
• uz Spoji pravila pri minifikaciji pravila s istim deklaracijama se grupišu (a{color:red} b{color:red} postaje a,b{color:red}), a nadjačane deklaracije se odbacuju.

Restrukturiranje je sigurno za uobičajene stilske dokumente, ali pomjera deklaracije. Ako se tvoj CSS oslanja na vrlo specifičan redoslijed kaskade, na primjer na hackove za preglednike, ukloni oznaku s opcije: csso će tada samo sažeti svako pravilo na mjestu.

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

Veličina prije i poslije

Red statusa poredi veličinu ulaza i rezultata u UTF-8 bajtovima. Uljepšani kod je obično veći od originala; minifikovani kod na ručno pisanom CSS-u obično štedi od 20 do 50 %. Zapamti da serveri datoteke dodatno komprimiraju pomoću gzipa ili Brotlija, pa je ušteda pri prenosu manja od sirove brojke, ali minifikacija i dalje smanjuje vrijeme parsiranja i veličinu keširanih datoteka.