CSS-formaterer og -minifiserer

Slik formaterer eller minifiserer du CSS

1. Lim inn stilarket ditt, eller klikk Åpne fil for å laste en .css-fil (opptil 10 MB).
2. Velg Innrykk (2 mellomrom, 4 mellomrom eller en tabulator) og om du vil ha Tom linje mellom regler.
3. Klikk Formater (pent oppsett) for lesbar kode, eller Minifiser for den minste versjonen.
4. Ved minifisering lar du Slå sammen regler ved minifisering stå avkrysset for best resultat, og Behold /*! kommentarer */ avkrysset for å bevare lisenshoder.
5. Kopier eller last ned resultatet. Statuslinjen viser størrelsen før og etter, i byte, og hvor mange prosent du sparte.

Hvis en klammeparentes mangler, stopper verktøyet og forteller deg på hvilken linje den ulukkede { eller den overflødige } står, i stedet for å lage ødelagt resultat.

Pent oppsett: lesbar og ensartet CSS

Formater (pent oppsett) bruker js-beautify, formatereren som finnes i mange kodeeditorer. Den setter hver deklarasjon på en egen linje, rykker inn innholdet i hver regel og i at-regler som @media og @supports, skriver hver velger i en gruppe på en egen linje, og legger til et mellomrom etter kolonet i hver deklarasjon. Eksisterende tomme linjer beholdes (høyst én på rad), så de logiske delene av filen din forblir synlige. Formatereren endrer aldri verdier, rekkefølgen på regler eller betydningen av velgere: den endrer bare mellomrom og linjeskift.

Det er nyttig for å lese minifisert CSS fra et nettsted, gå gjennom et stilark som er laget av et verktøy, eller rydde opp i en fil som flere personer har redigert med ulike vaner.

Minifiser: mindre CSS med csso

Minifiser bruker csso (CSS Optimizer), en strukturell minifiserer. I tillegg til å fjerne mellomrom og kommentarer skriver den stilarket om til en tilsvarende, kortere form:

• farger forkortes (#ff0000 blir red, #ffffff blir #fff)
• enheter og nuller forenkles (0px blir 0, 0.5em blir .5em)
• doble deklarasjoner fjernes, og samlebetegnelser (shorthand) slås sammen når det er trygt
• med Slå sammen regler ved minifisering grupperes regler med identiske deklarasjoner (a{color:red} b{color:red} blir a,b{color:red}), og overstyrte deklarasjoner fjernes

Omstrukturering er trygt for vanlige stilark, men den flytter deklarasjoner. Hvis CSS-en din er avhengig av en helt bestemt kaskaderekkefølge, for eksempel nettleserhack, fjerner du avkrysningen: csso komprimerer da bare hver regel der den står.

Kommentarer fjernes, bortsett fra «viktige» kommentarer som begynner med /*!, som ofte brukes til lisenser. Fjern avkrysningen for Behold /*! kommentarer */ for å fjerne dem også.

Størrelse før og etter

Statuslinjen sammenligner størrelsen på inndata og resultat i UTF-8-byte. Formatert kode er vanligvis større enn originalen, mens minifisert kode typisk sparer 20 til 50 % på håndskrevet CSS. Husk at servere også komprimerer filer med gzip eller Brotli, så besparelsen i overføring er mindre enn råtallet, men minifisering reduserer likevel tolketiden og størrelsen på bufrede filer.