CSS minifikator in formatter

Kaj je to orodje?

CSS minifier prepiše tabelo slogov, da je čim manjša, ne da bi spremenil njeno prikazovanje: odstrani komentarje in presledke, skrajša barvne vrednosti in ničelne enote, kjer je varno, združi podvojena pravila in odstrani odvečne podpičja.

To orodje temelji na clean-css, CSS optimizatorju, ki tabelo slogov dejansko razčleni v AST namesto da uporablja regex, zato lahko varno obravnava mejne primere, ki pokvarijo naivne minifierje — CSS lastne lastnosti (--main-color: ...), vsebino znotraj nizov ter zapletene selektorje in media queries, vse to izide pravilno.

Zakaj ga uporabiti?

• Minifikacija na osnovi AST (clean-css), ne regex — varna z lastnimi lastnostmi, nizi in gnezdenimi media queries.
• Optimizacije 2. stopnje združujejo in poenostavljajo pravila za dodatne prihranke poleg preprostega odstranjevanja presledkov.
• Vidi natančno, koliko bajtov in koliko odstotkov si prihranil.
• Način formatiranja spremeni skrčeno tabelo slogov nazaj v berljiv CSS z doslednim zamikom.
• 100 % lokalna obdelava — lastniški ali še neobjavljeni slogi nikoli ne zapustijo tvojega brskalnika.

Kako ga uporabljati

1. Prilepi svoj CSS v vnosno polje ali klikni "Load Example" za primer z lastno lastnostjo in media query.
2. Klikni "Minify", da ga skrčiš, ali "Format", da ga olepšaš z 2-presledčnim zamikom.
3. Preveri sporočilo pod poljema — način minify prikaže zmanjšanje velikosti; neveljaven CSS prikaže jasno napako namesto tihe izdelave pokvarjenega izhoda.
4. Klikni "Copy", da prevzameš rezultat.

Primer

Vnos

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

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

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

Rezultat

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

Lastna lastnost, media query in vrstni red kaskade so vsi ohranjeni — odstranjeni so samo presledki, komentarji in odvečni znaki.

Praktični nasveti

• Skrči ob gradnji/objavi, ne med razvojem — uredi berljiv izvorni kod in prepusti temu orodju (ali svojemu gradbenemu procesu), da ustvari objavljeno različico.
• Če iščeš, zakaj stran v produkciji izgleda drugače, formatiranje skrčenega CSS-a najprej olajša primerjavo z izvornim kodom.
• Lastne lastnosti preživijo skrčevanje, tako da so tabele slogov na osnovi oblikovnih žetonov (z --spacing, --color-* itd.) varne za obdelavo skozi to orodje.
• Kombiniraj z minifierjema HTML in JS spodaj, če tvoj projekt hrani vse v ločenih datotekah pred izdajo.

Kje se to uporablja v resničnih delovnih tokovih

CSS je ena od bolj učinkovitih stvari za skrčevanje, ker tabele slogov privzeto blokirajo izris — vsak prihranjen bajt lahko malo skrajša čas do prvega prikaza, še posebej pri počasnejših povezavah. To je manjša zmaga kot optimizacija slik, a je bistveno brezplačna, ko je enkrat vključena v gradbeni proces.

Smer Format je uporabna za nasprotni problem: pregledovanje tekmečeve ali stare produkcijske tabele slogov, ki je objavljena skrčena, da razumeš njeno strukturo pred pisanjem prepisa ali redizajna.

→ Minifikator HTML · JS Minifikator

Pogosti primeri uporabe

• Skrčevanje tabele slogov pred objavo statične strani ali pristajalne strani.
• Preoblikovanje skrčene CSS datoteke, pridobljene z žive strani, za preučitev njene strukture.
• Čiščenje CSS-a, izvoženega iz oblikovalskega orodja, ki pogosto vsebuje odvečne komentarje in presledke.
• Hitro preverjanje, ali se ročno pisan CSS odlomek pravilno razčleni, saj se pokvarjen CSS pokaže kot izrecna napaka.

Pogosta vprašanja