CSS formatētājs un minimizētājs

Kā formatēt vai minimizēt CSS

1. Ielīmējiet savu stilu lapu vai noklikšķiniet uz Atvērt failu, lai ielādētu .css failu (līdz 10 MB).
2. Izvēlieties Atkāpe (2 atstarpes, 4 atstarpes vai tabulācija) un to, vai vēlaties Tukša rinda starp noteikumiem.
3. Noklikšķiniet uz Formatēt (sakārtot), lai iegūtu lasāmu kodu, vai uz Minimizēt, lai iegūtu vismazāko versiju.
4. Minimizējot, atstājiet atzīmētu Apvienot noteikumus minimizējot, lai iegūtu labāko rezultātu, un Saglabāt /*! komentārus */, lai saglabātu licenču galvenes.
5. Nokopējiet vai lejupielādējiet rezultātu. Statusa rindiņa rāda izmēru pirms un pēc baitos un ietaupījuma procentus.

Ja trūkst figūriekavas, rīks apstājas un pasaka, kurā rindā ir neaizvērtā { vai lieka }, nevis rada bojātu izvadi.

Sakārtošana: lasāms, vienots CSS

Formatēt (sakārtot) izmanto js-beautify, formatētāju, kas ir daudzos koda redaktoros. Tas katru deklarāciju novieto savā rindā, ievelk katra noteikuma un at-noteikumu, piemēram, @media un @supports, saturu, katru grupas selektoru raksta savā rindā un pievieno atstarpi aiz katras deklarācijas kola. Esošās tukšās rindas tiek saglabātas (ne vairāk kā viena pēc kārtas), tāpēc faila loģiskās sadaļas paliek redzamas. Formatētājs nekad nemaina vērtības, noteikumu secību vai selektoru nozīmi: tas maina tikai atstarpes.

Tas noder, lai lasītu minimizētu CSS no vietnes, pārskatītu rīka ģenerētu stilu lapu vai sakārtotu failu, ko rediģējuši vairāki cilvēki ar dažādiem ieradumiem.

Minimizēšana: mazāks CSS ar csso

Minimizēt izmanto csso (CSS Optimizer), strukturālu minimizētāju. Papildus atstarpju un komentāru noņemšanai tas pārraksta stilu lapu līdzvērtīgā, īsākā formā:

• krāsas tiek saīsinātas (#ff0000 kļūst par red, #ffffff – par #fff);
• vienības un nulles tiek vienkāršotas (0px kļūst par 0, 0.5em – par .5em);
• dublētas deklarācijas tiek noņemtas, un saīsinātās īpašības tiek apvienotas, kad tas ir droši;
• ar Apvienot noteikumus minimizējot noteikumi ar identiskām deklarācijām tiek sagrupēti (a{color:red} b{color:red} kļūst par a,b{color:red}), un pārrakstītās deklarācijas tiek izmestas.

Pārstrukturēšana parastām stilu lapām ir droša, taču tā pārvieto deklarācijas. Ja jūsu CSS paļaujas uz ļoti konkrētu kaskādes secību, piemēram, pārlūku uzlaušanas paņēmieniem, noņemiet atzīmi: tad csso saspiedīs tikai katru noteikumu uz vietas.

Komentāri tiek noņemti, izņemot „svarīgos“ komentārus, kas sākas ar /*! un ko parasti izmanto licencēm. Noņemiet atzīmi Saglabāt /*! komentārus */, lai noņemtu arī tos.

Izmērs pirms un pēc

Statusa rindiņa salīdzina ievades un rezultāta izmēru UTF-8 baitos. Sakārtots kods parasti ir lielāks par oriģinālu; minimizēts kods ar roku rakstītam CSS parasti ietaupa 20 līdz 50 %. Atcerieties, ka serveri failus saspiež arī ar gzip vai Brotli, tāpēc pārsūtīšanas ietaupījums ir mazāks par neapstrādāto skaitli, taču minimizēšana tomēr samazina parsēšanas laiku un kešatmiņā glabāto failu izmēru.