CSS formater i minifikator

Kako da formatiraš ili minifikuješ CSS

1. Nalepi stilsku tabelu ili klikni Otvori fajl da učitaš .css fajl (do 10 MB).
2. Izaberi Uvlačenje (2 razmaka, 4 razmaka ili tabulator) i da li želiš Prazan red između pravila.
3. Klikni Formatiraj (sredi) da dobiješ čitljiv kod ili Minifikuj da dobiješ 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 sa licencama.
5. Kopiraj ili preuzmi rezultat. Statusni red prikazuje veličinu pre i posle, u bajtovima, i procenat ušteđenog prostora.

Ako zagrada nedostaje, alat staje i kaže ti u kom redu je nezatvorena { ili suvišna }, umesto da napravi neispravan izlaz.

Formatiranje: čitljiv i dosledan CSS

Formatiraj (sredi) koristi js-beautify, formater koji se nalazi u mnogim uređivačima koda. Svaku deklaraciju stavlja u poseban red, uvlači sadržaj svakog pravila i at-pravila poput @media i @supports, svaki selektor iz grupe piše u svom redu i dodaje razmak posle dvotačke u svakoj deklaraciji. Postojeći prazni redovi se zadržavaju (najviše jedan zaredom), pa logički odeljci tvog fajla ostaju vidljivi. Formater nikada ne menja vrednosti, redosled pravila ni značenje selektora: menja samo razmake.

Ovo je korisno za čitanje minifikovanog CSS-a sa veb-sajta, za pregled stilske tabele koju je generisao neki alat ili za sređivanje fajla koji je uređivalo više ljudi sa različitim navikama.

Minifikacija: manji CSS pomoću csso

Minifikuj koristi csso (CSS Optimizer), strukturni minifikator. Pored uklanjanja razmaka i komentara, prepisuje stilsku tabelu 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);
• duple deklaracije se uklanjaju, a skraćena svojstva se spajaju kad je to bezbedno;
• uz Spoji pravila pri minifikaciji, pravila sa istim deklaracijama se grupišu (a{color:red} b{color:red} postaje a,b{color:red}), a prepisane deklaracije se odbacuju.

Restrukturiranje je bezbedno za uobičajene stilske tabele, ali premešta deklaracije. Ako se tvoj CSS oslanja na veoma poseban redosled kaskade, na primer na hakove za pregledače, ukloni oznaku sa opcije: csso će tada samo komprimovati svako pravilo na njegovom mestu.

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

Veličina pre i posle

Statusni red poredi veličinu ulaza i rezultata u UTF-8 bajtovima. Formatiran kod je obično veći od originala, a minifikovan kod na ručno pisanom CSS-u obično štedi od 20 do 50%. Imaj na umu da serveri fajlove dodatno kompresuju pomoću gzip-a ili Brotlija, pa je ušteda pri prenosu manja od sirove brojke, ali minifikacija i dalje skraćuje vreme parsiranja i smanjuje veličinu keširanih fajlova.