Gratis CSS-kompressor Online
Komprimer CSS for produksjon øyeblikkelig — kjører i nettleseren, ingen opplastinger.
CSS-inndata
Minifisert CSS
Eksempler på CSS-minifisering
Formatert CSS er lesbart; minifisert CSS er kompakt for produksjon. Eksempel:
Beholder- og knappstiler
Formatert inndata:
Minifisert utdata:
Bruk Eksempel over for å laste mer eksempeldata.
Hva er en CSS-minifiserer?
CSS-filer bruker whitespace, kommentarer og innrykk for lesbarhet. I produksjon laster mindre filer raskere. En CSS-minifiserer fjerner unødvendig whitespace og kommentarer og forkorter verdier der det er trygt for å redusere filstørrelsen. W3C CSS-spesifikasjonene definerer språket; minifisering beholder oppførsel og reduserer bytes.
Verktøyet parser CSS-en din og gir en kompakt versjon. Minifisering skjer helt i nettleseren din. Ingenting sendes til server. For å formatere minifisert CSS, bruk CSS-formaterer. For validering, CSS-validator.
Slik bruker du verktøyet
Lim inn eller last opp CSS
Kopier CSS og lim inn i venstre editor. Du kan også klikke Last opp for å åpne en .css-fil. Eksempel laster eksempeldata. Ugyldig CSS viser feil.
Se minifisert utdata
Høyre panel viser kompakt CSS. Whitespace og kommentarer fjernes. Utdata er gyldig CSS — oppførsel beholdes. Ugyldig CSS viser feil i utdata.
Kopier eller last ned
Bruk Kopier eller Last ned. For SCSS eller Less, kompiler først med SCSS til CSS eller Less til CSS, deretter minifiser.
Slik fungerer minifisereren
Verktøyet fjerner whitespace, linjeskift og kommentarer fra CSS-en din. Verdier kan forkortes der det er trygt (f.eks. 0px til 0, #ffffff til #fff). Utdata forblir gyldig etter W3C CSS-spesifikasjonen. Byggeverktøy som cssnano eller PostCSS gir mer aggressiv optimalisering; dette verktøyet gir rask nettleserbasert minifisering.
Når CSS-minifisering hjelper
Produksjonsnettsteder drar nytte av mindre CSS-filer. Minifisering reduserer nyttelast, forbedrer lastetid og sparer båndbredde. Byggeverktøy som Webpack, Vite eller Parcel minifiserer ofte automatisk, men dette verktøyet er nyttig for enkeltfiler, raske sjekker eller når du ikke har build-steg.
E-postmaler, innebygde stiler eller CDN-hostet CSS trenger ofte manuell minifisering. Å kjøre stilarket her gir produksjonsklar utdata. For leverandørprefiks før minifisering, bruk CSS-prefiks. For å formatere minifisert CSS tilbake til lesbar form, CSS-formaterer.
Ofte stilte spørsmål
Ødelegger minifisering CSS?
Nei. Kun whitespace og kommentarer fjernes. Selektorer, egenskaper og verdier forblir. Utdata er gyldig CSS. Noen minifiserere kan forkorte verdier (f.eks. 0px til 0) — oppførsel beholdes.
Er dataene mine private?
Ja. Minifisering skjer helt i nettleseren din. Ingen data sendes til server.
Hva med source maps?
Verktøyet genererer ikke source maps. For produksjonsbygg med source maps, bruk PostCSS, cssnano eller bundlerens minifiserer.
Støtter det SCSS eller Less?
Verktøyet minifiserer ren CSS. For SCSS eller Less, kompiler først med SCSS til CSS eller Less til CSS, deretter minifiser utdata.
Hvor mye mindre blir det?
Vanligvis 20–40 % mindre avhengig av whitespace og kommentarer. Tungt kommentert eller formatert CSS kan spare mer. Nøyaktig reduksjon avhenger av inndata.
Relaterte verktøy
CSS-spesifikasjon: W3C CSS. Referanse: MDN CSS. cssnano og PostCSS gir avansert minifisering ved bygg.