Hoe verklein ek CSS aanlyn sonder om iets te installeer?

Plak jou CSS in Invoer-CSS, of los 'n .css-lêer, klik dan Verklein CSS. Kommentaar en oortollige witruimte word verwyder, en jy kan die resultaat Kopieer of as styles.min.css Laai af.

Behou die CSS-verkleiner lisensiekommentaar en data-URI's ongeskonde?

Ja. Gewone kommentaar word weggelaat, maar /*! license */-kommentaar word behou. Aangehaalde stringe, url()-waardes en data-URI's word apart getokeniseer, so witruimtereëls verander hulle nie.

Hoe verander ek verkleinde CSS terug in leesbare kode?

Klik Verfraai CSS in plaas van Verklein CSS. Die kode word met twee spasies per vlak weer ingekeep, en selektor-dubbelpunte soos a:hover word van eienskap-dubbelpunte onderskei. Laai af stoor dit as styles.css.

Wat beteken die gzip-getal langs die vermindering?

Dit is 'n skatting van die uitvoergrootte ná gzip-kompressie, gemeet met die blaaier se CompressionStream-API. As jou blaaier daardie API ontbreek, word die gzip-grootte nie gewys nie.

Word my CSS na 'n bediener gestuur wanneer ek dit verklein?

Nee. Verkleining word gedoen deur 'n JavaScript-tokeniseerder wat in jou blaaier loop, sonder 'n eksterne biblioteek. Niks word opgelaai nie, so jy kan dit op private style-blaaie gebruik.

Is dit regtig gratis?

Ja. Elke instrument is gratis om te gebruik, sonder 'n rekening en sonder 'n kredietkaart. Die werk loop op jou toestel eerder as op ons bedieners, en dit is wat dit gratis hou om te loop.

Ja. Dit werk in huidige mobiele blaaiers op iOS en Android, sonder om iets te installeer.

🗜️

Gratis CSS Verminderaar en verfraaier

Verklein CSS om lêergrootte te verminder of verfraai verkleinde CSS vir leesbaarheid. Onmiddellik, in jou blaaier.

Loop in jou blaaierGeen aanmelding, geen opspringers nieGeen aanmelding benodigGratis vir altyd

Werk vanlyn sodra gelaai

of los 'n .css-lêer hieronder

Los 'n .css-lêer hier, of klik om te blaai

CSS · op jou toestel verwerk

of druk Ctrl+V om vanaf jou knipbord te plak

Blaai deur lêers

Invoer-CSS

Uitvoer-CSS

Uitvoer verskyn hier…

Algemene gebruike

Verklein CSS vir produksie-implementeringVerklein CSS-lêergrootte voordat u na produksie implementeer - vinniger bladsyelade en laer bandwydtekoste.
Verfraai verkleinde CSS vir foutopsporingFormatteer saamgeperste of verkleinde CSS in leesbare kode sodat u styl kan inspeksioneer en fout kan opspoor.
Verklein CSS vir e-posmalleieKompakter CSS vir HTML-e-posmalleie waar lêergrootte en inlinestyl-opblazing belangrik is.
Verklein CSS vir WordPress-temasVerklein die grootte van persoonlike WordPress-temastylvelle vir beter PageSpeed-tellings.
Verfraai CSS vir kodebeoordelingFormatteer enige CSS-lêer in skoon ingespronge leesbare kode wat gereed is vir beoordeling en samewerking.

Hoe dit werk

Hierdie nutsprogram gebruik 'n handgeskrewe, sonder-afhanklikheid-CSS-tokeniseerder heeltemal in JavaScript gebou — geen eksterne biblioteke, geen bedienerbellings nie. Die tokeniseerder klassifiseer elke karakter as kode, kommentaar, aangehaalde string, of url()-waarde voordat enige transformasies toegepas word, wat voorkom dat spasiëringsreëls string-inhoud, data-URI's, of calc()-uitdrukkings korrupteer.

1
Tokeniseringspas
Die toevoer-CSS word karakter-vir-karakter geskandeer en in getipeerde tokens verdeel: rou kodesegmente, /* ... */-kommentaar, aangehaalde strings (wat ontsnappingsvolgorde bewaar), en url(...)-blokke. Dit verseker dat transformasies in die volgende stap slegs werklike CSS-sintaksis raak — nooit die inhoud van 'n string-letterlike of data-URI nie.
2
Verkleining of verfraaiing
In verkleiningsmodus word gewone kommentaar laat val (/*! lisensie */-kommentaar word behou), reekse spasiëring in kodetoekens tot enkele spasies saamgevou, en leestekens-langsliggende spasiëring rondom { } : ; , > ~ verwyder. Spasies rondom + en - word doelbewus alleen gelaat om nie calc()-uitdrukkings te breek nie. In verfraaiingsmodus word die kode eers na 'n skoon basislyn verklein, dan hertokeniseer en herinkeep met twee-spasie-diepte-nasporing en verklaring-dubbelpunt-bespeuring om property: value-dubbelpunte van kieser-dubbelpunte soos a:hover te onderskei.
3
Gzip-groottetakskatting
Nadat die uitset geproduseer is, word die blaaier se inheemse CompressionStream-API gebruik om die resultaat met gzip te komprimeer en die resulterende greeptelling te meet. Dit gee 'n realistiese oordraggrootte-skatting wat ooreenstem met wat 'n webbediener met gzip-kompressie oor die netwerk sou stuur.
4
Kopieer of laai af
Die verwerkte CSS word na die knipbord geskryf via die Clipboard-API, of afgelaai as styles.min.css (verkleiningsmodus) of styles.css (verfraaiingsmodus) met 'n Blob met MIME-tipe text/css. Die grootteverminderingspersentasie word lewendig gewys terwyl jy tik.

Verwante gereedskap

✨

SVG Optimaliseerder en verkleiner

Stroop metadata, vou witspasie in en rond desimale desimale om SVG lêergrootte dramaties te verklein – tipiese vermindering van 30-70%. Visuele voorskou bevestig dat niks breek nie.

Probeer ditLêers bly plaaslik

🎨

CSS Verfraaier

Formateer verklein CSS leesbaar met eenvormige inkeping, of verklein dit. Opsionele alfabetiese sortering van eienskappe vir voorspelbare verskille.

Probeer dit

📋

JSON Formateerder

Formateer, bekragtig, verklein en verken JSON-data. Boomaansig, sintaksis-verligting en een-klik-kopie.