Gratis CSS-minificerer: Komprimér & Optimer CSS-kode Online

Hvad er en CSS-minificering?

En CSS-minificering er et værktøj, der gør en CSS-fil (Cascading Style Sheets) mindre ved at fjerne tegn, som browsere ikke har brug for. Det fjerner kommentarer, ekstra mellemrum og linjeskift og forkorter nogle almindelige mønstre uden at ændre sidens udseende. Resultatet er en mindre fil, som en browser kan hente og fortolke hurtigere.

Sådan fungerer CSS-minificering

Webudviklere skriver CSS med kommentarer, indrykning og tomme linjer, fordi det gør koden lettere at læse og redigere. Browsere ignorerer al denne formatering. Et minificeringsværktøj fjerner den sammen med en række andre bytes, der ikke har noget visuelt formål, og efterlader en kompakt fil, der er beregnet til brug i produktion frem for redigering.

Dette værktøj udfører følgende ændringer:

• Fjerner kommentarer. Alle blokke med /* ... */ slettes.
• Reducerer mellemrum. Sekvenser af mellemrum, tabulatorer og linjeskift mellem regler reduceres til ingenting eller til ét mellemrum, hvor et mellemrum har betydning (for eksempel mellem .parent og .child i en efterkommerselektor).
• Fjerner whitespace omkring tegnsætning. Mellemrum ved siden af {, }, :, ; og , fjernes.
• Fjerner ekstra semikoloner. Gentagne semikoloner sammenlægges til ét, og det sidste semikolon før en afsluttende } fjernes.
• Forkorter hexadecimale farver. En sekscifret farve som #ffffff bliver til #fff, når hvert cifferpar er ens (rød, grøn og blå). En ottecifret farve med alfa, f.eks. #ffaa00cc, forkortes på samme måde, når alle fire par er ens.
• Fjerner enheden fra værdier med længden nul. 0px, 0em og 0rem bliver til 0. Procentværdier lades være, fordi 0% ikke altid kan erstattes af almindelig 0 (f.eks. i et flex-basis- eller @keyframes-trin).
• Fjerner et indledende nul fra decimaltal. 0.5 bliver til .5.

For at undgå at ødelægge filen lader værktøjet tre slags indhold være urørt: tekst i anførselstegn, værdien i en URL uden anførselstegn url() og indholdet i matematiske funktioner som calc(), clamp(), min() og max(). Mellemrum i calc(100% - 20px) har betydning for browseren, så værktøjet bevarer dem nøjagtigt.

Værktøjet kombinerer ikke dublerede selektorer, sletter ikke tomme regelblokke og konverterer ikke rgb()-farver til hex. Det er gyldige optimeringer, som andre værktøjer udfører, men denne minificering fokuserer på ændringerne ovenfor.

Formlen for reduktionsprocenten

Værktøjet angiver, hvor meget mindre filen blev, som en procentdel:

Begge længder tælles i tegn. Resultatet afrundes til to decimaler.

Regneeksempel

Oprindelig CSS (193 tegn):

Minificeret resultat (129 tegn):

Anvendelse af formlen: (193 − 129) / 193 × 100 = 33,16 %. Kommentaren er væk, indrykningen og linjeskiftene er væk, 0px blev til 0, og #ffffff/#000000 blev til #fff/#000.

Den nøjagtige procentdel afhænger af inputtet. Tæt skrevet CSS med få kommentarer bliver mindre reduceret. CSS med mange kommentarer og dyb indrykning kan reduceres mere. Typiske stilark, der minificeres med dette værktøj, reduceres med cirka 20 % til 40 %.

Sådan bruger du dette værktøj

1. Indsæt CSS-kode i inputfeltet til venstre.
2. Den minificerede version vises automatisk til højre uden nogen knap, der skal trykkes på.
3. Kontrollér reduktionsprocenten, der vises over resultatet.
4. Vælg "Kopiér til udklipsholder" for at kopiere den minificerede CSS, og indsæt den derefter i en projektfil.
5. Vælg "Ryd" for at slette indholdet i begge felter og begynde forfra.

Intet, der skrives i værktøjet, sendes til en server; minificeringen kører i browseren.

Hvornår CSS bør minificeres

Udviklingsteams minificerer almindeligvis CSS som et trin i deres buildproces ved hjælp af værktøjer som Webpack eller npm-scripts, så ændringen sker automatisk før hver udrulning. Den læsbare kildefil med kommentarer forbliver i versionsstyringen; kun produktionsbuildet minificeres. Almindelige steder, hvor minificeret CSS bruges, omfatter:

• Store websteder, f.eks. netbutikker, hvor et mindre stilark betyder en side, der indlæses hurtigere.
• Single-page-applikationer, der er bygget med rammeværker som React eller Vue, hvor CSS samles sammen med JavaScript.
• Mobile websider, hvor brugerne oftere har en langsommere forbindelse.
• HTML-e-mails, som ofte har strenge størrelsesbegrænsninger.

CSS-minificering og sidehastighed

En mindre CSS-fil hentes og fortolkes hurtigere, hvilket kan forkorte tiden, før en side bliver synlig. Google har oplyst, at sidehastighed er et af de signaler, der bruges til rangeringen i søgeresultaterne, så en hurtigere side kan være én lille faktor blandt mange for et websteds placering i søgeresultaterne. Minificering alene garanterer ikke en ændring i placeringen; det er én optimering blandt flere, herunder billedkomprimering og serverens svartid.

CSS-minificering kontra CSS-formatering

Et minificeringsværktøj komprimerer kode til produktionsbrug. Et formatteringsværktøj gør det modsatte: Det tager komprimeret CSS og formaterer den igen med indrykning og linjeskift, så en person kan læse den. Et formatteringsværktøj kan ikke gendanne kommentarer eller oprindelige variabelnavne, der blev fjernet under minificeringen, fordi oplysningerne er væk, når de først er slettet.

Ofte stillede spørgsmål

Hvor meget mindre bliver CSS efter minificering? Med dette værktøj typisk 20 % til 40 %, afhængigt af hvor mange kommentarer, tomme linjer og hvor meget indrykning den oprindelige fil har. En fil med kun lidt formatering fra begyndelsen bliver mindre reduceret.

Ændrer CSS-minificering sidens udseende? Nej. Minificering fjerner kun tegn, som browsere ignorerer, f.eks. kommentarer og ekstra whitespace, og omskriver nogle ækvivalente værdier (som #ffffff til #fff). Den viste side forbliver den samme.

Bør CSS minificeres under udviklingen? Nej. Bevar den læsbare version med kommentarer, mens koden skrives og fejlfindes. Minificér kun den kopi, der sendes til en produktionsserver, normalt som et automatisk trin i buildprocessen.

Kan minificeret CSS laves om til den oprindelige fil? En formaterer kan formatere minificeret CSS igen med indrykning, men den kan ikke gendanne slettede kommentarer eller beskrivende navne, som aldrig var til stede i den minificerede version. Bevar den oprindelige kildefil.

Konverterer dette værktøj rgb()-farver til hex eller sammenlægger identiske selektorer? Nej. Det forkorter hex-farver og fjerner unødvendige tegn, men det omskriver ikke rgb()/hsl()-værdier eller sammenlægger gentagne selektorer. Nogle andre minificeringsværktøjer udfører disse ekstra trin.

Er minificering det samme som gzip-komprimering? Nej. Minificering fjerner unødvendige tegn fra selve kildekoden. Gzip- (eller Brotli-)komprimering udføres af webserveren, når filen sendes, ved hjælp af en separat algoritme. Brug af begge dele sammen giver den mindste fil over netværket.