CSS minifitseerija ja vormindaja

Mis see tööriist on?

CSS minifier kirjutab stiililehe ümber võimalikult väikeseks, muutmata selle renderdumist: eemaldab kommentaarid ja tühikud, lühendab värviväärtuseid ja null-ühikuid, kui see on ohutu, ühendab dubleerivaid reegleid ning eemaldab üleliigsed semikoolonid.

See tööriist on ehitatud clean-css peale, CSS optimeerijale, mis tegelikult parsib stiililehe AST-ks, mitte ei kasuta regex'it, mistõttu suudab see turvaliselt käsitleda äärejuhtumeid, mis lõhuvad naiivseid minifiereid — CSS custom property'd (--main-color: ...), sisu stringide sees ning keerulised selektorid ja meedia päringud tulevad kõik korrektselt välja.

Miks seda kasutada?

• AST-põhine minifitseerimine (clean-css), mitte regex — turvaline custom property'de, stringide ja pesastatud meedia päringutega.
• Level 2 optimeerimised ühendavad ja lihtsustavad reegleid täiendava kokkuhoiu jaoks pelgalt tühikute eemaldamisest kaugemale.
• Näe täpselt, mitu baiti ja mitu protsenti sa kokku hoidsid.
• Vormindusrežiim muudab minifitseeritud stiililehe tagasi loetavaks CSS-iks ühtse taandega.
• 100% kohalik töötlus — omanduslikud või avaldamata stiilid ei lahku kunagi sinu brauserist.

Kuidas kasutada

1. Kleebi oma CSS sisendkasti või klõpsa "Lae näidis", et proovida näidist custom property ja meedia päringuga.
2. Klõpsa "Minifitseeri", et seda kokku pakkida, või "Vorminda", et see 2-tühikulise taandega kaunistada.
3. Vaata kastide all olevat teadet — minifitseerimisrežiim näitab suuruse vähenemist; vigane CSS näitab selge veateate, selle asemel et vaikimisi vigast väljundit toota.
4. Klõpsa "Kopeeri", et tulemus haarata.

Näide

Sisend

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

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

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

Tulemus

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

Custom property, meedia päring ja kaskaadi järjekord säilivad kõik — eemaldatakse ainult tühikud, kommentaarid ja üleliigsed märgid.

Praktilised nõuanded

• Minifitseeri ehitus-/juurutusfaasis, mitte arenduse ajal — muuda loetavat lähtekoodi ja lase sellel tööriistal (või oma ehitustorul) toota juurutatava versiooni.
• Kui uurid, miks leht näeb tootmises teistsugune välja, muudab minifitseeritud CSS-i vormindamine enne diffi lähtekoodiga palju loetavamaks.
• Custom property'd säilivad minifitseerimise ajal, seega on disaini-tokenitel põhinevad stiililehed (kasutades --spacing, --color-* jne) selle tööriista kaudu jooksutamiseks turvalised.
• Kombineeri allolevate HTML ja JS minifieritega, kui su projekt hoiab kõik eraldi failides enne juurutamist.

Kuhu see reaalsetes töövoogudes sobib

CSS on üks kõrgema mõjuga asju minifitseerimiseks, kuna stiililehed on vaikimisi renderdamist blokeerivad — iga stiililehest eemaldatud bait võib esimesest värvitusest natukene aega kokku hoida, eriti aeglasematel ühendustel. See on väiksem võit kui pildioptimeerimine, kuid see on põhimõtteliselt tasuta, kui see on kord ehitusprotsessi lisatud.

Vormindussuund on kasulik vastupidise probleemi jaoks: konkurendi või vanema tootmise stiililehe uurimine, mis on juurutatud minifitseerituna, et selle struktuurist aru saada enne ülekirjutuse või redisaini kirjutamist.

→ HTML minifitseerija · JS minimeerija

Levinud kasutusjuhud

• Stiililehe vähendamine enne staatilise saidi või sihtlehe juurutamist.
• Elavalt saidilt saadud minifitseeritud CSS faili vormindamine selle struktuuri uurimiseks.
• Disainitööriistast eksporditud CSS-i puhastamine, mis sisaldab tihti liigseid kommentaare ja tühikuid.
• Kiire kontroll, kas käsitsi kirjutatud CSS katkend parsub õigesti, kuna vigane CSS ilmub selge veana.

Korduma kippuvad küsimused