CSS-formaterer og -minifiserer

Formatering og minifisering av CSS

CSS-kode skrives og vedlikeholdes av mennesker, men tolkes av nettlesere. Dette skaper to motstridende behov: Utviklere trenger struktur, luft og forklarende kommentarer for å kunne lese og redigere stilark effektivt. Nettlesere har derimot ikke bruk for innrykk, linjeskift eller kommentarer for å tolke koden.

Dette verktøyet løser denne konflikten ved å tilby to funksjoner: formatering (beautification) og minifisering (minification). Formatering gjenoppretter strukturen i uoversiktlig eller sammentrengt CSS-kode ved å legge til konsekvente innrykk og linjeavstander. Minifisering gjør det motsatte ved å fjerne overflødige tegn og komprimere verdiene, slik at filstørrelsen reduseres og innlastingstiden for nettsiden blir kortere.

Hvordan tegn og kommentarer påvirker filstørrelsen

Hvert eneste tegn i en CSS-fil, inkludert mellomrom, tabulatorer, linjeskift og kommentarer, tar opp plass. I et UTF-8-kodet stilark tilsvarer de fleste standardtegn 1 byte. Selv om et enkelt mellomrom utgjør lite alene, kan tusenvis av linjer med ustrukturert kode akkumulere betydelige mengder unødvendige data.

Når en bruker besøker en nettside, må nettleseren laste ned hele CSS-filen før siden kan rendres fullstendig. Store stilark fører til lengre ventetid og tregere visning av innholdet. Ved å fjerne uvesentlige tegn reduseres filstørrelsen, noe som direkte bidrar til raskere innlasting av nettsider.

Forskjellen på sikker og optimalisert komprimering

Når du minifiserer CSS, kan du velge mellom to ulike komprimeringsnivåer basert på hvordan koden skal behandles:

• Sikker: Dette nivået fjerner kun unødvendige mellomrom, linjeskift og kommentarer, samt forkorter spesifikke verdier som fargekoder. Alle CSS-regler forblir nøyaktig på sin opprinnelige plass i stilarket. Leverandørprefikser (vendor prefixes) og moderne syntaks endres ikke. Dette sikrer at stilarkets opprinnelige struktur bevares fullt ut.
• Optimalisert: Dette nivået utfører mer aggressive optimaliseringer for å oppnå en mindre filstørrelse. Verktøyet slår sammen dupliserte selektorer og regler som deler identiske egenskaper. Siden denne prosessen kan omorganisere rekkefølgen på reglene, bør du verifisere resultatet dersom stilarket ditt er avhengig av en spesifikk kaskaderekkefølge.

Bevaring av viktige kommentarer

Selv om vanlige kommentarer fjernes under minifisering for å spare plass, finnes det tilfeller der opphavsrett, lisensinformasjon eller viktige metadata må bevares. Kommentarer som er markert med utropstegn, spesifikt i formatet /*! … */, blir beholdt i koden uavhengig av om du velger Sikker eller Optimalisert komprimering.

Forkorting av fargeverdier og egenskaper

Under minifisering reduserer verktøyet lengden på spesifikke verdier der det er teknisk mulig uten at det endrer hvordan nettleseren tolker stilen. Et vanlig eksempel på dette er fargekoder i heksadesimalt format.

Hvis en fargekode består av repeterende tegnpar, kan den forkortes fra seks til tre tegn. For eksempel vil fargekoden #ffffff bli skrevet om til #fff. Dette sparer tre tegn (eller 3 byte) for hver forekomst av denne fargen i stilarket.

Grenser, feilhåndtering og personvern

Verktøyet har en øvre grense for inndata på 500 000 tegn. Hvis du limer inn en CSS-fil som overskrider denne grensen, vil verktøyet stoppe prosessen og vise feilmeldingen:

Dette stilarket er for stort til å behandles. Prøv en mindre fil.

Dersom du forsøker å behandle tomme inndata, eller hvis koden inneholder kritiske syntaksfeil som gjør at minifikatoren produserer en tom streng, vises følgende melding:

Fant ingen CSS å minifisere – sjekk inndataene for syntaksfeil.

Hvis stilarket inneholder andre feil som gjør at det ikke kan tolkes eller behandles, vil verktøyet vise feilmeldingen:

Kunne ikke behandle denne CSS-en.

Lokal databehandling

Når du bruker dette verktøyet, behandles koden din lokalt i nettleseren din. CSS-en din formateres og minifiseres lokalt i nettleseren din. Ingenting sendes til BroBroGo.

Bruk av verktøyets grensesnitt

For å behandle koden din, limer du inn stilarket i feltet merket CSS-inndata. Deretter velger du ønskede innstillinger:

1. Innrykk: Velg mellom 2 mellomrom, 4 mellomrom eller tabulator for formatering.
2. Komprimering: Velg enten Sikker eller Optimalisert for minifisering.

Etter at du har klikket på enten Formater eller Minifiser, vil verktøyet vise resultatet sammen med statistikk over den behandlede koden:

• Linjer: Antall linjer i den resulterende CSS-koden.
• Tegn: Totalt antall tegn i koden.
• Størrelse: Den nøyaktige filstørrelsen i UTF-8-byte.
• Minifisert – {pct} % mindre: Vises når koden har blitt minifisert, og oppgir den prosentvise reduksjonen i filstørrelse.

Du kan kopiere resultatet direkte til utklippstavlen med kopieringsknappen, eller laste det ned som en fil med navnet styles.css ved å bruke knappen Last ned.

---

Ofte stilte spørsmål

Hva er forskjellen på formatering og minifisering?

Formatering (beautify) legger til innrykk og mellomrom i stilarkene dine slik at de blir enkle å lese og redigere. Minifisering gjør det motsatte – det fjerner unødvendige mellomrom og kommentarer som nettleseren ikke trenger, og forkorter verdier som farger, slik at filen blir mindre og laster raskere. Formater mens du jobber, minifiser før du publiserer.

Hva gjør innstillingene Sikker og Optimalisert komprimering?

Sikker modus fjerner kun mellomrom og kommentarer samt forkorter verdier, og lar alle regler stå nøyaktig der du skrev dem. Optimalisert modus går lenger og slår sammen dupliserte selektorer og regler for å gi en mindre fil – dette kan endre rekkefølgen på regler, så på stilark som er avhengige av rekkefølge bør du ta en rask sjekk før du publiserer. Kommentarer markert med /*! … */ beholdes uansett.

Vil minifisering endre hvordan siden min ser ut?

I Sikker modus vil ikke stilene dine endre seg – de rendres helt likt. Den fjerner unødvendige mellomrom, vanlige kommentarer og skriver om verdier til kortere, ekvivalente former (som #ffffff til #fff), og endrer aldri leverandørprefiksene (vendor prefixes) eller moderne syntaks. Optimalisert modus slår også sammen regler, noe som ser identisk ut på nesten alle stilark, men det er verdt å verifisere hvis koden din er avhengig av rekkefølgen på reglene.