CSS minifikatorius ir formatuotojas

Kas yra šis įrankis?

CSS minifikatorius perrašo stilių lentelę taip, kad ji būtų kuo mažesnė, nekeičiant jos atvaizdavimo: pašalina komentarus ir tarpus, sutrumpina spalvų reikšmes ir nulinius vienetus, kai tai saugu, sujungia pasikartojančias taisykles ir panaikina perteklinius kabliataškius.

Šis įrankis sukurtas naudojant clean-css — CSS optimizatorių, kuris iš tikrųjų analizuoja stilių lentelę į AST struktūrą, o ne naudoja reguliariąsias išraiškas. Būtent todėl jis gali saugiai apdoroti kraštutinius atvejus, dėl kurių sugenda primityvūs minifikatoriai — CSS pasirinktiniai kintamieji (--main-color: ...), turinys eilutėse ir sudėtingi selektoriai bei medijos užklausos visada apdorojami teisingai.

Kodėl jį naudoti?

• Minifikavimas paremtas AST (clean-css), o ne reguliariosiomis išraiškomis — saugus su pasirinktiniais kintamaisiais, eilutėmis ir įdėtomis medijos užklausomis.
• 2 lygio optimizacijos sujungia ir supaprastina taisykles, taip pasiekiant dar didesnį sutaupymą nei vien tarpų pašalinimas.
• Matote tiksliai, kiek baitų ir kiek procentų sutaupėte.
• Formatavimo režimas paverčia sumažintą stilių lentelę atgal į skaitomą CSS su nuosekliomis įtraukomis.
• 100% apdorojimas vietoje — nepaskelbti ar nuosavi stiliai niekada nepalieka jūsų naršyklės.

Kaip naudoti

1. Įklijuokite savo CSS į įvesties langą arba spustelėkite „Įkelti pavyzdį“, kad išbandytumėte pavyzdį su pasirinktiniu kintamuoju ir medijos užklausa.
2. Spustelėkite „Minifikuoti“, kad suspaustumėte, arba „Formatuoti“, kad gražiai suformatuotumėte su 2 tarpų įtraukomis.
3. Patikrinkite pranešimą po langais — minifikavimo režimas rodo dydžio sumažėjimą; neteisingas CSS rodo aiškų klaidos pranešimą, o ne tyliai sukuria sugadintą rezultatą.
4. Spustelėkite „Kopijuoti“, kad gautumėte rezultatą.

Pavyzdys

Įvestis

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

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

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

Išvestis

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

Pasirinktinis kintamasis, medijos užklausa ir kaskados tvarka išsaugomi — pašalinami tik tarpai, komentarai ir pertekliniai simboliai.

Praktiniai patarimai

• Minifikuokite kūrimo/diegimo metu, o ne kūrimo proceso metu — redaguokite skaitomą pirminį kodą ir leiskite šiam įrankiui (ar savo build proceso konvejeriui) sukurti diegiamą versiją.
• Jei bandote suprasti, kodėl puslapis produkcijoje atrodo kitaip, pirmiausia suformatavus sumažintą CSS, palyginimą su pirminiu kodu bus daug lengviau skaityti.
• Pasirinktiniai kintamieji išlieka po minifikavimo, todėl stilių lentelės, paremtos dizaino žetonais (naudojant --spacing, --color-* ir pan.), gali būti saugiai apdorojamos šiuo įrankiu.
• Derinkite su žemiau esančiais HTML ir JS minifikatoriais, jei jūsų projektas laiko viską atskiruose failuose prieš išleidimą.

Kur tai naudinga realiuose darbo procesuose

CSS yra vienas naudingiausių dalykų minifikuoti, nes stilių lentelės pagal numatymą blokuoja atvaizdavimą — kiekvienas iš stilių lentelės pašalintas baitas gali šiek tiek sutrumpinti pirmojo atvaizdavimo laiką, ypač lėtesniuose ryšiuose. Tai mažesnis laimėjimas nei vaizdų optimizavimas, bet jis iš esmės nemokamas, kai jau įtrauktas į build procesą.

Formatavimo kryptis naudinga priešingai problemai spręsti: nagrinėjant konkurento ar seno produkcinio stiliaus failo, kuris išleistas sumažintas, struktūrą prieš rašant perrašymą (override) ar perkūrimą.

→ HTML glaudinimo įrankis · JS suspaustuvas

Dažni naudojimo atvejai

• Stilių lentelės sumažinimas prieš diegiant statinę svetainę ar reklaminį puslapį.
• Sumažinto CSS failo, gauto iš veikiančios svetainės, performatavimas, siekiant ištirti jo struktūrą.
• CSS, eksportuoto iš dizaino įrankio, kuriame dažnai gausu perteklinių komentarų ir tarpų, sutvarkymas.
• Greitas patikrinimas, ar ranka rašytas CSS fragmentas teisingai analizuojamas, nes netinkamai suformuotas CSS parodo aiškią klaidą.

Dažniausiai užduodami klausimai