CSS minifikators un formatētājs

Kas ir šis rīks?

CSS minifikators pārraksta stilu failu, lai tas būtu pēc iespējas mazāks, nemainot tā renderēšanu: tas noņem komentārus un atstarpes, saīsina krāsu vērtības un nulles vienības, kur tas ir droši, apvieno dublētus noteikumus un noņem liekus semikolus.

Šis rīks ir izveidots uz clean-css bāzes, CSS optimizatora, kas patiešām parsē stilu failu AST struktūrā, nevis izmanto regulāras izteiksmes, tāpēc tas var droši apstrādāt malas gadījumus, kas sabojā naivus minifikatorus — CSS pielāgotās īpašības (--main-color: ...), saturs virknēs un sarežģīti selektori un media vaicājumi visi iznāk pareizi.

Kāpēc to izmantot?

• AST bāzēta minifikācija (clean-css), nevis regulāras izteiksmes — droši ar pielāgotajām īpašībām, virknēm un ligzdotiem media vaicājumiem.
• 2. līmeņa optimizācijas apvieno un vienkāršo noteikumus papildu ietaupījumiem, ne tikai atstarpju noņemšanai.
• Redzi tieši, cik baitu un cik procentu ietaupīji.
• Formatēšanas režīms pārvērš minificētu stilu failu atpakaļ lasāmā CSS ar konsekventām atkāpēm.
• 100% lokāla apstrāde — piederīgi vai vēl nepublicēti stili nekad neatstāj tavu pārlūku.

Kā to lietot

1. Ielīmē savu CSS ievades laukā vai klikšķini "Load Example", lai izmēģinātu paraugu ar pielāgotu īpašību un media vaicājumu.
2. Klikšķini "Minify", lai to saspiestu, vai "Format", lai to izskaistinātu ar 2 atstarpju atkāpēm.
3. Pārbaudi ziņojumu zem lodziņiem — minifikācijas režīms parāda izmēra samazinājumu; nederīgs CSS parāda skaidru kļūdu, nevis klusi rada bojātu izvadi.
4. Klikšķini "Copy", lai iegūtu rezultātu.

Piemērs

Ievade

:root {
  --main-color: #4f46e5;
}

.card {
  color: var(--main-color);
  padding: 16px;
}

@media (max-width: 600px) {
  .card {
    padding: 8px;
  }
}

Izvade

:root{--main-color:#4f46e5}.card{color:var(--main-color);padding:16px}@media (max-width:600px){.card{padding:8px}}

Pielāgotā īpašība, media vaicājums un kaskādes secība visi tiek saglabāti — tiek noņemtas tikai atstarpes, komentāri un lieki simboli.

Praktiski padomi

• Minificē būvēšanas/izvietošanas laikā, nevis izstrādes laikā — rediģē lasāmo pirmkodu un ļauj šim rīkam (vai savai būvēšanas plūsmai) radīt izvietoto versiju.
• Ja tu atkļūdo, kāpēc lapa produkcijā izskatās citādi, minificētā CSS formatēšana vispirms padara salīdzinājumu ar tavu pirmkodu daudz vieglāk lasāmu.
• Pielāgotās īpašības pārdzīvo minifikāciju, tāpēc dizaina marķieru bāzēti stilu faili (kas izmanto --spacing, --color-*, utt.) ir droši palaižami caur šo rīku.
• Kombinē ar HTML un JS minifikatoriem zemāk, ja tavs projekts pirms izlaiduma glabā visu atsevišķos failos.

Kur tas iederas reālās darbplūsmās

CSS ir viena no vērtīgākajām lietām, ko minificēt, jo stilu faili pēc noklusējuma bloķē renderēšanu — katrs baits, kas nogriezts no stilu faila, var nedaudz paātrināt pirmo attēlojumu, īpaši lēnākos savienojumos. Tas ir mazāks ieguvums nekā attēlu optimizācija, taču tas ir būtībā bezmaksas, kad reiz iestrādāts būvēšanas solī.

Formatēšanas virziens ir noderīgs pretējai problēmai: konkurenta vai vecmantota produkcijas stilu faila, kas piegādāts minificēts, apskatei, lai saprastu tā struktūru pirms pārrakstīšanas vai redizaina veidošanas.

→ HTML minificētājs · JS saīsinātājs

Izplatīti lietojuma gadījumi

• Stilu faila samazināšana pirms statiskas vietnes vai galvenās lapas izvietošanas.
• Minificēta CSS faila, kas iegūts no reālas vietnes, pārformatēšana, lai izpētītu tā struktūru.
• No dizaina rīka eksportēta CSS sakopšana, kas bieži satur pārmērīgus komentārus un atstarpes.
• Ātra pārbaude, vai ar rokām rakstīts CSS fragments tiek parsēts pareizi, jo nepareizi formēts CSS parādās kā skaidra kļūda.

Biežāk uzdotie jautājumi