Gratis CSS-minifiserer: Komprimer og optimaliser CSS-kode på nettet

Hva er en CSS-minifiserer?

En CSS-minifiserer er et verktøy som gjør en CSS-fil (Cascading Style Sheets) mindre ved å fjerne tegn som nettlesere ikke trenger. Den fjerner kommentarer, ekstra mellomrom og linjeskift, og forkorter noen vanlige mønstre uten å endre hvordan siden ser ut. Resultatet er en mindre fil som nettleseren kan laste ned og tolke raskere.

Slik fungerer CSS-minifisering

Webutviklere skriver CSS med kommentarer, innrykk og tomme linjer fordi dette gjør koden enklere å lese og redigere. Nettlesere ignorerer all denne formateringen. En minifiserer sletter den, sammen med en håndfull andre byte som ikke har noen visuell funksjon, og etterlater en kompakt fil beregnet på produksjonsbruk i stedet for redigering.

Dette verktøyet gjør følgende endringer:

• Fjerner kommentarer. Hver blokk med /* ... */ slettes.
• Slår sammen mellomrom. Sekvenser med mellomrom, tabulatorer og linjeskift mellom regler reduseres til ingenting, eller til ett enkelt mellomrom der et mellomrom har betydning (for eksempel mellom .parent og .child i en etterkommersel-selektor).
• Fjerner mellomrom rundt tegnsetting. Mellomrom ved siden av {, }, :, ; og , fjernes.
• Fjerner overflødige semikolon. Gjentatte semikolon slås sammen til ett, og det siste semikolonet før en avsluttende } fjernes.
• Forkorter heksadesimale farger. En farge med seks sifre, for eksempel #ffffff, blir til #fff når hvert sifferpar er likt (rødt, grønt og blått). En farge med åtte sifre og alfakanal, for eksempel #ffaa00cc, forkortes på samme måte når alle fire parene er like.
• Fjerner enheten fra verdier med lengden null. 0px, 0em og 0rem blir til 0. Prosentverdier beholdes, fordi 0% ikke alltid kan byttes ut med vanlig 0 (for eksempel i et flex-basis- eller @keyframes-trinn).
• Fjerner en innledende null fra desimaltall. 0.5 blir til .5.

For å unngå å ødelegge filen lar verktøyet tre typer innhold være urørt: tekst i anførselstegn, verdien i en url() uten anførselstegn og innholdet i matematikkfunksjoner som calc(), clamp(), min() og max(). Mellomrom i calc(100% - 20px) har betydning for nettleseren, så verktøyet bevarer det nøyaktig.

Verktøyet slår ikke sammen identiske selektorer, sletter ikke tomme regelblokker og konverterer ikke rgb()-farger til heksadesimal form. Dette er gyldige optimaliseringer som andre verktøy utfører, men denne minifisereren fokuserer på endringene som er oppført ovenfor.

Formelen for prosentvis reduksjon

Verktøyet oppgir hvor mye mindre filen ble, som en prosentandel:

Begge lengdene telles i tegn. Resultatet avrundes til to desimaler.

Eksempel

Opprinnelig CSS (193 tegn):

Minifisert resultat (129 tegn):

Når formelen brukes: (193 − 129) / 193 × 100 = 33,16 %. Kommentaren er borte, innrykk og linjeskift er borte, 0px ble til 0, og #ffffff/#000000 ble til #fff/#000.

Den nøyaktige prosentandelen avhenger av inndataene. Tett skrevet CSS med få kommentarer blir mindre redusert. CSS med mange kommentarer og dypt innrykk kan bli betydelig mindre. Typiske stilark som minifiseres med dette verktøyet, får en reduksjon på omtrent 20 % til 40 %.

Slik bruker du dette verktøyet

1. Lim inn CSS-kode i inndataboksen til venstre.
2. Den minifiserte versjonen vises automatisk til høyre, uten at du trenger å trykke på en knapp.
3. Kontroller reduksjonsprosenten som vises over resultatet.
4. Velg «Copy to Clipboard» for å kopiere den minifiserte CSS-en, og lim den deretter inn i en prosjektfil.
5. Velg «Clear» for å tømme begge boksene og begynne på nytt.

Ingenting som skrives inn i verktøyet, sendes til en server; minifiseringen kjøres i nettleseren.

Når CSS bør minifiseres

Utviklingsteam minifiserer vanligvis CSS som et trinn i byggeprosessen, ved hjelp av verktøy som Webpack eller npm-skript, slik at endringen skjer automatisk før hver utrulling. Den lesbare kildefilen med kommentarer beholdes i versjonskontrollen; bare produksjonsbygget minifiseres. Vanlige bruksområder for minifisert CSS er:

• Store nettsteder, for eksempel nettbutikker, der et mindre stilark gir en side som lastes inn raskere.
• Enkeltsideapplikasjoner bygget med rammeverk som React eller Vue, der CSS samles sammen med JavaScript.
• Mobile nettsider, der brukerne oftere har en tregere forbindelse.
• HTML-e-poster, som ofte har strenge størrelsesbegrensninger.

CSS-minifisering og sidehastighet

En mindre CSS-fil lastes ned og tolkes raskere, noe som kan forkorte tiden før en side blir synlig. Google har uttalt at sidehastighet er et av signalene som brukes ved rangering i søk, så en raskere side kan være én liten faktor blant mange for hvordan et nettsted gjør det i søkeresultatene. Minifisering alene garanterer ikke en endring i rangeringen; det er én av flere optimaliseringer, blant annet bildekomprimering og svartid fra serveren.

CSS-minifiserer kontra CSS-formaterer

En minifiserer komprimerer kode for produksjon. En formaterer gjør det motsatte: Den tar komprimert CSS og formaterer den på nytt med innrykk og linjeskift, slik at en person kan lese den igjen. En formaterer kan ikke gjenopprette kommentarer eller opprinnelige variabelnavn som ble fjernet under minifiseringen, fordi denne informasjonen er borte når den først er slettet.

Ofte stilte spørsmål

Hvor mye mindre blir CSS etter minifisering? Med dette verktøyet vanligvis fra 20 % til 40 %, avhengig av hvor mange kommentarer, tomme linjer og hvor mye innrykk den opprinnelige filen har. En fil som i utgangspunktet har lite formatering, blir mindre redusert.

Endrer minifisering av CSS hvordan en side ser ut? Nei. Minifisering fjerner bare tegn som nettlesere ignorerer, for eksempel kommentarer og ekstra mellomrom, og skriver om noen ekvivalente verdier (som #ffffff til #fff). Den gjengitte siden forblir den samme.

Bør CSS minifiseres under utviklingen? Nei. Behold den lesbare versjonen med kommentarer mens koden skrives og feilsøkes. Minifiser bare kopien som sendes til en produksjonsserver, vanligvis som et automatisk trinn i byggeprosessen.

Kan minifisert CSS gjøres om til den opprinnelige filen? En formaterer kan formatere minifisert CSS på nytt med innrykk, men kan ikke gjenopprette slettede kommentarer eller beskrivende navn som aldri var med i den minifiserte versjonen. Behold den opprinnelige kildefilen.

Konverterer dette verktøyet rgb()-farger til heksadesimal form, eller slår det sammen identiske selektorer? Nei. Det forkorter heksadesimale farger og fjerner unødvendige tegn, men skriver ikke om rgb()/hsl()-verdier og slår ikke sammen gjentatte selektorer. Noen andre minifiserere utfører disse ekstra trinnene.

Er minifisering det samme som gzip-komprimering? Nei. Minifisering fjerner unødvendige tegn fra selve kildekoden. Gzip (eller Brotli)-komprimering utføres av webserveren når filen sendes, ved hjelp av en separat algoritme. Når begge brukes sammen, blir filen minst mulig over nettverket.