Formatuesi dhe minifikuesi i CSS

Si ta formatosh ose minifikosh CSS-in

1. Ngjit stilet, ose kliko Hap një skedar për të ngarkuar një skedar .css (deri në 10 MB).
2. Zgjidh Shtyrjen (2 hapësira, 4 hapësira ose një tabulim) dhe nëse dëshiron Rresht bosh mes rregullave.
3. Kliko Formato (bukuro) për të marrë kod të lexueshëm, ose Minifiko për versionin më të vogël.
4. Për minifikim, mbaje të shënuar Bashko rregullat gjatë minifikimit për rezultatin më të mirë, dhe Mbaj /*! komentet */ të shënuar për të ruajtur kokat e licencës.
5. Kopjo ose shkarko rezultatin. Rreshti i gjendjes tregon madhësinë para dhe pas, në bajte, dhe përqindjen e kursyer.

Nëse mungon një kllapë, mjeti ndalon dhe të tregon në cilin rresht është { e pambyllur ose } e tepërt, në vend që të prodhojë rezultat të prishur.

Bukurim: CSS i lexueshëm dhe konsistent

Formato (bukuro) përdor js-beautify, formatuesin që gjendet në shumë editorë kodi. Vendos çdo deklaratë në rreshtin e vet, shtyn përmbajtjen e çdo rregulli dhe të rregullave me @ si @media e @supports, shkruan çdo përzgjedhës të një grupi në rreshtin e vet dhe shton një hapësirë pas dy pikave të çdo deklarate. Rreshtat bosh ekzistues ruhen (më së shumti një pas njëri-tjetrit), ndaj pjesët logjike të skedarit mbeten të dukshme. Formatuesi nuk ndryshon kurrë vlerat, radhën e rregullave apo kuptimin e përzgjedhësve: ndryshon vetëm hapësirat.

Është i dobishëm për të lexuar CSS të minifikuar nga një faqe interneti, për të rishikuar stile të gjeneruara nga një mjet, ose për të pastruar një skedar të redaktuar nga disa njerëz me zakone të ndryshme.

Minifikim: CSS më i vogël me csso

Minifiko përdor csso (CSS Optimizer), një minifikues strukturor. Përtej heqjes së hapësirave dhe komenteve, e rishkruan stilin në një formë ekuivalente, më të shkurtër:

• ngjyrat shkurtohen (#ff0000 bëhet red, #ffffff bëhet #fff);
• njësitë dhe zerot thjeshtohen (0px bëhet 0, 0.5em bëhet .5em);
• deklaratat e dyfishta hiqen dhe vetitë e shkurtra bashkohen kur është e sigurt;
• me Bashko rregullat gjatë minifikimit, rregullat me deklarata identike grupohen (a{color:red} b{color:red} bëhet a,b{color:red}) dhe deklaratat e mbishkruara hiqen.

Ristrukturimi është i sigurt për stile normale, por i zhvendos deklaratat. Nëse CSS-i yt mbështetet te një radhë shumë e veçantë e kaskadës, për shembull hile për shfletuesit, hiq shenjën nga opsioni: csso atëherë vetëm do ta ngjeshë çdo rregull në vend.

Komentet hiqen, përveç komenteve “të rëndësishme” që nisin me /*!, shpesh të përdorura për licenca. Hiq shenjën nga Mbaj /*! komentet */ për t’i hequr edhe ato.

Madhësia para dhe pas

Rreshti i gjendjes krahason madhësinë e hyrjes dhe të rezultatit në bajte UTF-8. Kodi i bukuruar zakonisht është më i madh se origjinali; kodi i minifikuar zakonisht kursen 20 deri 50% në CSS të shkruar me dorë. Mos harro që serverët i ngjeshin skedarët edhe me gzip ose Brotli, ndaj kursimi në transferim është më i vogël se shifra e papërpunuar, por minifikimi prapë zvogëlon kohën e analizimit dhe madhësinë e skedarëve në cache.