Kuidas minimeerida CSS-i veebis midagi installimata?

Kleebi oma CSS väljale Sisend-CSS või lohista sisse .css fail ja klõpsa Minimeeri CSS. Kommentaarid ja liigsed tühimärgid eemaldatakse ning tulemuse saad Kopeerida või Laadida alla failina styles.min.css.

Kas CSS-i minimeerija säilitab litsentsikommentaarid ja andme-URI-d puutumatuna?

Jah. Tavalised kommentaarid jäetakse välja, kuid /*! license */ kommentaarid säilitatakse. Jutumärkides stringid, url() väärtused ja andme-URI-d tokeniseeritakse eraldi, seega tühimärgireeglid neid ei muuda.

Kuidas teha minimeeritud CSS tagasi loetavaks koodiks?

Klõpsa Kaunista CSS, mitte Minimeeri CSS. Kood taandatakse uuesti kahe tühikuga taseme kohta ning selektorite koolonid nagu a:hover eristatakse omaduste koolonitest. Laadi alla salvestab selle failina styles.css.

Mida tähendab vähenemise kõrval olev gzip-number?

See on hinnang väljundi suurusele pärast gzip-tihendust, mõõdetuna brauseri CompressionStream API-ga. Kui sinu brauseris seda API-t pole, gzip-suurust ei näidata.

Kas mu CSS saadetakse minimeerimisel serverisse?

Ei. Minimeerimist teeb sinu brauseris töötav JavaScripti tokeniseerija, ilma välise teegita. Midagi ei laadita üles, seega saad seda kasutada privaatsete stiililehtede jaoks.

Kas see on tõesti tasuta?

Jah. Iga tööriist on tasuta kasutamiseks, ei nõua kontot ega krediitkaarti. Töö toimub sinu seadmes, mitte meie serverites, mis võimaldabki seda tasuta pakkuda.

Kas see töötab mobiilseadmetes?

Jah. See töötab tänapäevastes mobiilibrauserites iOS-is ja Androidis ning midagi pole vaja installida.

🗜️

CSS-minifitseerija ja kaunistaja tasuta

Minifitseeri CSS faili mahu vähendamiseks või kaunista minifitseeritud CSS loetavuse parandamiseks. Kohene, sinu brauseris.

Töötab sinu brauserisRegistreerimist pole, hüpikaknaid poleSisselogimist ei nõutaIgavesti tasuta

Töötab võrguühenduseta pärast laadimist

või lohista .css-fail allapoole

Lohista .css-fail siia või klõpsa sirvimiseks

CSS · töödeldakse sinu seadmes

või vajutage lõikelaualt kleepimiseks Ctrl+V

Sirvi faile

Sisend CSS

Väljund CSS

Väljund ilmub siia…

Levinud kasutusviisid

Vähendage CSS tootmises juurutamiseksVähendage CSS faili suurust enne juurutamist tootmisse — kiiremad leheküljete laadimised ja madalam ribalaiuse kuludest.
Kaunista vähendatud CSS silumiselVormindage kokkusurutud või vähendatud CSS loetavasse koodi, et saaksite stiili kontrollida ja siluda.
Vähendage CSS e-posti mallideleKompaktne CSS HTML e-posti mallidele, kuhu failisuuruse ja sisseehitatud stiilis paisumisele on oluline.
Vähendage CSS Wordpressi teemadeleVähendage kohandatud Wordpress'i teema CSS suurust paremaid PageSpeed'i tulemusi.
Kaunista CSS koodileVormindage iga CSS-fail puhtasse, sissesurutud, loetavasse koodi, mis on valmis ülevaateks ja koostööks.

Kuidas see töötab

See tööriist kasutab käsitsi kirjutatud, sõltuvusteta CSS tokeniseerijat, mis on täielikult JavaScriptis ehitatud — väliseid teeke ega serverikutseid pole. Tokeniseerija klassifitseerib iga tähemärgi koodiks, kommentaariks, jutumärkides stringiks või url() väärtuseks enne mis tahes teisenduste rakendamist, mis takistab tühikureeglitel rikkumast stringisisu, andme-URI-sid või calc() avaldisi.

1
Tokeniseerimise läbimine
Sisendi CSS skaneeritakse tähemärk-tähemärgi haaval ja jagatakse tüübitud tokeniteks: toores koodisegmendid, /* ... */ kommentaarid, jutumärkides stringid (säilitades paokombinatsioonid) ja url(...) plokid. See tagab, et järgmise sammu teisendused puudutavad ainult tegelikku CSS-süntaksit — mitte kunagi stringiliteraali või andme-URI sisu.
2
Minifitseerimine või ilustamine
Minifitseerimise režiimis kõrvaldatakse tavalised kommentaarid (/*! license */ kommentaarid säilivad), koodi tokenite tühikuseeriad kokkuvõetakse üksikuteks tühikuteks ja kirjavahemärkide-kõrvalised tühikud { } : ; , > ~ ümber eemaldatakse. Tühikud + ja - ümber jäetakse tahtlikult puutumata, et mitte rikkuda calc() avaldisi. Ilustamise režiimis minifitseeritakse kood esmalt puhtale baastasandile, seejärel tokeniseeritakse ja sisennatakse uuesti kahetühikulise sügavuse jälgimisega ja deklaratsiooni-koolonivi tuvastusega, et eristada omadus: väärtus koolonid selektorikoolonitest nagu a:hover.
3
Gzip suuruse hinnang
Pärast väljundi toomist kasutatakse brauseri natiivset CompressionStream API-t, et tihendada tulemus gzip-iga ja mõõta saadav baidiarv. See annab realistliku ülekandesuuruse hinnangu, vastates sellele, mida gzip-tihendusega veebiserver võrgu kaudu saadaks.
4
Kopeeri või laadi alla
Töödeldud CSS kirjutatakse lõikelauale Clipboard API kaudu või laaditakse alla kui styles.min.css (minifitseerimise režiim) või styles.css (ilustamise režiim), kasutades Bloki MIME-tüübiga text/css. Suuruse vähenemise protsent näidatakse reaalajas kirjutades.

Seotud tööriistad

✨

SVG optimeerija ja minifitseerija

Eemalda metaandmed, kokkukleepige tühikud ja ümarda kümnendkohad SVG failimaht dramaatiliselt vähendamiseks — tavapärased vähendused 30–70%. Visuaalne eelvaade kinnitab, et midagi ei lähe katki.

Proovi järeleFailid jäävad kohalikuks

🎨

CSS kaunistaja

Vorminda minimeeritud CSS ühtse taandega või minimeeri see. Valikuline omaduste tähestikuline sorteerimine selgemate erinevuste jaoks.

Proovi järele

📋

JSON-vormindamine

Vorminda, valideeri, minimeeri ja uuri JSON-andmeid. Puuvaade, süntaksi esiletõstmine ja ühe klõpsuga kopeerimine.