Output will appear here...CSS Minifier & Beautifier is een tweerichtings stylesheet-tool: het comprimeert CSS door alles wat de browser nodig heeft te verwijderen - opmerkingen, witruimte, redundante puntkomma's, lange hexkleuren en eenheden op nulwaarden - en het kan het proces omkeren, een single-line productiebundel terug naar leesbare, correct ingesprongen regels. Elke byte die u uit een renderblokkerende stylesheet haalt, is een byte die de browser eerder downloadt en parseert, die rechtstreeks voedt met statistieken voor kernwebvitale functies, zoals Firstful Paint en grootste Contentful Paint.
De minifier is opzettelijk conservatief. Het is volledig op de hoogte van tekenreeksen, url()-waarden en calc()-uitdrukkingen, dus het verwijdert nooit de witruimte waarvan calc (100% - 20px) afhankelijk is, herschrijft nooit kleurachtige tekst in een inhoudsreeks en raakt nooit de ruimte aan die div :hover onderscheidt van div:hover. Op typische handgeschreven stylesheets kun je een vermindering van 25-40% verwachten voor gzip; gecombineerd met gzip of brotli op de draad, scheelt minification nog steeds een zinvolle slice, omdat compressie beter werkt bij herhaalde, commentaarvrije invoer.
Alles draait 100% client-side in uw browser. Uw CSS wordt nooit geüpload, gelogd of opgeslagen op een server, wat betekent dat u veilig gepatenteerde ontwerpsysteemcode, niet-uitgebrachte productstijlen of klantwerk kunt plakken. Het werkt ook offline zodra de pagina is geladen - handig wanneer u een snelle verminder doorlaat zonder een volledige postCSS- of ESBuild-pijplijn te bedraden.
Zet uw stylesheet in het invoergebied - een enkele regel, een componentbestand of een volledige productiebundel. Zowel geformatteerde als reeds geminifieerde CSS worden geaccepteerd.
Klik op Minify om te comprimeren voor productie, of verfraaien om de geminifieerde code uit te breiden tot één declaratie per regel met een lege regel tussen regels. Kies voor Verfraai eerst uw gewenste inspringing.
De tool rapporteert de exacte voor/na grootte en procentuele verandering (bijv. "12,4 kb → 8,1 kb, −34%"), zodat u precies weet wat de transformatie u heeft gekocht voordat u het verzendt.
Kopieer het resultaat met één klik naar uw klembord of download het als een .css-bestand dat klaar is om naar uw build-uitvoer of CDN te worden geplaatst.
Respecteert letterlijke tekenreeksen, url()-waarden en calc()-afstand - het comprimeert agressief zonder ooit geldige CSS te beschadigen
Herschrijft #FFFFF naar #FFF en 0px tot 0 waar aantoonbaar veilig, extra bytes knijpen buiten gewone witruimteverwijdering
BANKER-opmerkingen intact houden, dus bibliotheeklicentieheaders overleven minificatie, overeenkomend standaard build-tool gedrag
Breidt geminifieerde bundels uit naar leesbare regels met configureerbare 2, 4 of 8 ruimte-inspringing voor het debuggen van productieproblemen
Minify HTML markup for faster page loads or beautify it for readable, indented source
Format messy SQL into readable, indented queries or minify SQL to a single line
Format, validate, and minify JSON data
Create beautiful CSS gradients with live preview
0 comments
No comments yet. Be the first to share your thoughts!