Formatare și minificare CSS

Cum formatezi sau minifici CSS

1. Lipește foaia de stil sau apasă Deschide fișierul pentru a încărca un fișier .css (până la 10 MB).
2. Alege Indentare (2 spații, 4 spații sau un tab) și dacă vrei Linie goală între reguli.
3. Apasă Formatează (înfrumusețează) pentru cod lizibil sau Minifică pentru cea mai mică versiune.
4. Pentru minificare, lasă bifat Îmbină regulile la minificare ca să obții cel mai bun rezultat și Păstrează comentariile /*! … */ ca să păstrezi antetele de licență.
5. Copiază sau descarcă rezultatul. Linia de stare arată dimensiunea înainte și după, în octeți, și procentul economisit.

Dacă lipsește o acoladă, instrumentul se oprește și îți spune la ce linie se află { neînchis sau } în plus, în loc să producă un rezultat stricat.

Înfrumusețare: CSS lizibil și coerent

Formatează (înfrumusețează) folosește js-beautify, formatatorul din multe editoare de cod. Pune fiecare declarație pe o linie proprie, indentează conținutul fiecărei reguli și al regulilor-@ precum @media și @supports, scrie fiecare selector dintr-un grup pe linia lui și adaugă un spațiu după două puncte în fiecare declarație. Liniile goale existente sunt păstrate (cel mult una la rând), deci secțiunile logice ale fișierului rămân vizibile. Formatatorul nu schimbă niciodată valorile, ordinea regulilor sau sensul selectorilor: modifică doar spațiile.

Este util pentru a citi CSS minificat de pe un site, pentru a revizui o foaie de stil generată de o unealtă sau pentru a curăța un fișier editat de mai multe persoane cu obiceiuri diferite.

Minificare: CSS mai mic cu csso

Minifică folosește csso (CSS Optimizer), un minificator structural. Pe lângă eliminarea spațiilor și a comentariilor, rescrie foaia de stil într-o formă echivalentă, mai scurtă:

• culorile sunt scurtate (#ff0000 devine red, #ffffff devine #fff);
• unitățile și zerourile sunt simplificate (0px devine 0, 0.5em devine .5em);
• declarațiile duplicate sunt eliminate, iar proprietățile prescurtate sunt îmbinate atunci când este sigur;
• cu Îmbină regulile la minificare, regulile cu declarații identice sunt grupate (a{color:red} b{color:red} devine a,b{color:red}), iar declarațiile suprascrise sunt eliminate.

Restructurarea este sigură pentru foile de stil obișnuite, dar mută declarații. Dacă CSS-ul tău depinde de o ordine foarte precisă a cascadei, de exemplu hack-uri pentru browsere, debifează opțiunea: csso va comprima atunci fiecare regulă pe loc.

Comentariile sunt eliminate, cu excepția celor „importante”, care încep cu /*! și sunt folosite de obicei pentru licențe. Debifează Păstrează comentariile /*! … */ pentru a le elimina și pe acestea.

Dimensiunea înainte și după

Linia de stare compară dimensiunea intrării și a rezultatului în octeți UTF-8. Codul înfrumusețat este de obicei mai mare decât originalul; codul minificat economisește de regulă între 20% și 50% la CSS scris de mână. Ține minte că serverele comprimă fișierele și cu gzip sau Brotli, deci economia la transfer este mai mică decât cifra brută, dar minificarea reduce totuși timpul de analiză și dimensiunea fișierelor din cache.