Gratis omformer

CSS Minifier

Reduser og komprimer CSS-stilark umiddelbart i nettleseren din. Fjern kommentarer, skjul mellomrom og reduser filstørrelsen. Gratis og privat.

Dra og slipp en CSS-fil her

Støtter .css-filer. Eller lim inn CSS-en ovenfor.

Eller

Om dette verktøyet

CSS-minifisering fjerner mellomrom, kommentarer og unødvendige tegn fra et stilark for å redusere størrelsen før det vises til nettlesere. De faktiske reglene er uendret: et minifisert stilark gjengir sider identisk med den ikke-minifiserte kilden. Besparelsene kommer fra å fjerne nye linjer, overflødige semikolon, kommentarer, muligheter for sekskantede farger og snarveier med null enhet (erstatter 0px med 0).

På moderne nettsteder med dusinvis av stilregler er den typiske reduksjonen 20–40 % sammenlignet med den ikke-forminskede kilden. Kombinert med gzip-komprimering på serveren, krymper de marginale besparelsene – gzip komprimerer allerede gjentatt tekst effektivt – men kombinasjonen slår fortsatt komprimering alene, spesielt når stilark bufres og serveres mange ganger til mange besøkende.

Denne minifieren behandler CSS i et enkelt pass, fjerner kommentarer utenfor url()-verdier, skjuler mellomrom, fjerner overflødige semikolon før du lukker klammeparenteser, bruker stenografi med nullenhet og konverterer sekssifrede heksadesimale farger til tresifret form der det er mulig (#ffffff → #fff). Utdata forblir gyldig CSS som alle nettlesere analyserer riktig.

Hvorfor forminske CSS

Mindre CSS-filer lastes inn raskere og gjengivelsesblokkerende tid faller, som begge forbedrer First Contentful Paint- og Largest Contentful Paint-poengene. For nettsteder der Core Web Vitals påvirker søkerangeringen, er hver kilobyte med gjengivelsesblokkerende CSS barbert verdt innsatsen.

Båndbreddekostnader har også betydning i stor skala. Nettsteder som betjener millioner av sidevisninger sparer målbare mengder utgang når stilarkene deres er 30 % mindre. CDN-regninger, mobildatabruk og energiforbruk har alle en liten fordel. Minifisering er i hovedsak gratis – et engangsbyggetrinn uten vedlikeholdskostnader.

Slik bruker du det

Lim inn CSS, få den forminskede versjonen.

  1. Lim inn CSS: Slipp en .css-fil eller lim inn CSS-kilde i inndataområdet. Minifieren godtar enhver gyldig CSS - moderne syntaks inkludert CSS-variabler, calc(), grid og flexbox.
  2. Velg alternativer: Standarder fjerner kommentarer, skjuler mellomrom og bruker vanlige snarveier. Du kan deaktivere spesifikke transformasjoner hvis du trenger å bevare kommentarer eller spesiell formatering.
  3. Forminsk: Minifieren går gjennom CSS, og bruker hver aktiverte transformasjon. Utgangen er funksjonelt identisk CSS med redusert størrelse.
  4. Bruk utgangen: Kopier eller last ned. Bytt ut kilde-CSSen i byggeutgangen din med den minifiserte versjonen, eller kjør minifisering som et byggetrinn i verktøyet ditt.

Vanlige brukstilfeller

Tekniske detaljer

CSS-minifisering er for det meste konservativ fjerning av mellomrom. Mellomrom inne i velgere, erklæringer og verdier er bevart der det er viktig; whitespace utenfor er kollapset. Kommentarer fjernes med mindre de begynner med /*! (lisensbevaringskommentarer).

Vanlige snarveier: 0px, 0em og lignende nullenhetsverdier blir 0; sekssifrede sekskantfarger med sammenkoblede sifre (#ffffff, #336699) blir tresifrede (#fff, #369); siste semikolon før } fjernes. Fargenavn konverteres ikke til hex automatisk fordi hex noen ganger er lengre (rød er kortere enn #f00 i lengden; #ff0000 er lengre enn rød).

Utdata skal passere enhver CSS-validator som godtar inndata. Nettleserstøtten er uendret - minifisering endrer ikke selve reglene, bare tekstrepresentasjonen.

Beste praksis

Ofte stilte spørsmål

Hva fjerner CSS-minifisering?
Mellomrom (mellomrom, tabulatorer, nye linjer), kommentarer (/* ... */), unødvendige semikolon, redundante nuller (0,5 → 0,5), stenografioptimaliseringer (#ffffff → #fff) og redundante enheter (0px → 0).
Er minifisert CSS trygt å bruke i produksjon?
Ja. Minifisering bevarer alle CSS-regler, velgere og egenskapsverdier. Utdataene er funksjonelt identiske - nettlesere tolker det nøyaktig på samme måte. Det er en standard praksis for alle produksjonsnettsteder.
Hvor mye størrelsesreduksjon bør jeg forvente?
Vanligvis 20-50 % for velskrevet CSS. Tungt kommentert kode med detaljert formatering ser større reduksjoner. Allerede kompakt CSS kan bare krympe 10–15 %.
Bør jeg forminske CSS hvis jeg bruker gzip?
Ja, begge deler. Gzip komprimerer gjentatte mønstre, mens minifisering fjerner unødvendige tegn. Sammen gir de bedre kompresjon enn begge alene. Minifisert + gzipped CSS er vanligvis 85–95 % mindre enn originalen.
Bør jeg minifisere alltid?
For produksjon ja. For utviklingskildefiler er ingen – lesbar CSS avgjørende for vedlikehold. Kjør minifisering på byggetidspunktet, ikke på redigeringstidspunktet.
Er min CSS lastet opp til en server?
Nei. Minifieren kjører i nettleseren din.
Hvordan er dette sammenlignet med cssnano eller csso?
cssnano og csso er PostCSS-plugins for produksjonsbygg; de tilbyr mer aggressive transformasjoner som å slå sammen overflødige regler. Dette verktøyet dekker grunnleggende minifikasjon for ad hoc-bruk uten byggeoppsett.
Bryter minifisering kildekart?
Minifisering genererer ikke kildekart; dette verktøyet produserer kun forminsket utgang. For å feilsøke minifisert CSS i produksjon, generer kildekart som en del av bygget ditt.