Hoppa till innehåll
🛠️
Whiz Tools

Gratis CSS-minifierare: Komprimera & Optimera CSS-kod Online

Minimera CSS-kod direkt och minska filstorleken med upp till 40%. Gratis online CSS-minifierare tar bort mellanrum, kommentarer och optimerar syntax för snabbare webbplatsprestandaa.

CSS-minifierare

Minifiera CSS-kod direkt för att minska filstorleken med upp till 40% och förbättra webbplatsens inläsningshastighet.

0 tecken
0 tecken

Om CSS-minifiering

CSS-minifiering tar bort onödiga tecken från CSS-filer utan att ändra funktionaliteten, vilket minskar filstorleken och förbättrar webbplatsens prestanda.

  • Tar bort kommentarer, mellanslag och radbrytningar
  • Eliminerar onödiga semikolon och nollenheter
  • Optimerar färgvärden och deklarationer
  • Förbättrar sidans inläsningshastighet och SEO-ranking
Laddningsberäknare...
📚

Dokumentation

Vad är en CSS-minifierare?

En CSS-minifierare är ett verktyg som minskar storleken på en CSS-fil (Cascading Style Sheets) genom att ta bort tecken som webbläsare inte behöver. Den tar bort kommentarer, extra blanksteg och radbrytningar samt förkortar några vanliga mönster, utan att ändra hur sidan ser ut. Resultatet är en mindre fil som en webbläsare kan hämta och tolka snabbare.

Så fungerar CSS-minifiering

Webbutvecklare skriver CSS med kommentarer, indrag och tomma rader eftersom det gör koden lättare att läsa och redigera. Webbläsare ignorerar all sådan formatering. En minifierare tar bort den, tillsammans med en del andra byte som inte har någon visuell funktion, och lämnar en kompakt fil avsedd för produktionsanvändning i stället för redigering.

Det här verktyget utför följande ändringar:

  • Tar bort kommentarer. Varje block med /* ... */ tas bort.
  • Slår ihop blanksteg. Sekvenser av mellanslag, tabbar och radbrytningar mellan regler reduceras till ingenting, eller till ett enda mellanslag där ett mellanslag behövs (till exempel mellan .parent och .child i en ättlingselektor).
  • Tar bort blanksteg runt skiljetecken. Mellanslag intill {, }, :, ; och , tas bort.
  • Tar bort överflödiga semikolon. Upprepade semikolon slås ihop till ett, och det sista semikolonet före en avslutande } tas bort.
  • Förkortar hexadecimala färger. En färg med sex siffror, till exempel #ffffff, blir #fff när varje sifferpar överensstämmer (rött, grönt och blått). En färg med åtta siffror och alfakanal, till exempel #ffaa00cc, förkortas på samma sätt när alla fyra par överensstämmer.
  • Tar bort enheten från värden med längden noll. 0px, 0em och 0rem blir 0. Procentvärden lämnas oförändrade, eftersom 0% inte alltid kan ersättas med ett vanligt 0 (till exempel i ett flex-basis-värde eller ett steg i @keyframes).
  • Tar bort en inledande nolla från decimaltal. 0.5 blir .5.

För att undvika att filen skadas lämnar verktyget tre typer av innehåll orörda: text inom citattecken, värdet i en okvoterad url() samt innehållet i matematiska funktioner som calc(), clamp(), min() och max(). Mellanslagen i calc(100% - 20px) är betydelsefulla för webbläsaren, så verktyget bevarar dem exakt.

Verktyget slår inte ihop duplicerade selektorer, tar inte bort tomma regelblock och omvandlar inte färger i rgb() till hexadecimala färger. Det är giltiga optimeringar som andra verktyg utför, men den här minifieraren fokuserar på ändringarna ovan.

Formeln för procentuell minskning

Verktyget rapporterar hur mycket mindre filen blev, uttryckt i procent:

1reduction % = ((original length − minified length) / original length) × 100
2

Båda längderna räknas i tecken. Resultatet avrundas till två decimaler.

Räkneexempel

Ursprunglig CSS (193 tecken):

1/* Navigation Styles */
2.nav-menu {
3  display: flex;
4  justify-content: space-between;
5  padding: 20px 0px;
6  background-color: #ffffff;
7}
8
9.nav-item {
10  margin-right: 15px;
11  color: #000000;
12}
13

Minifierat resultat (129 tecken):

1.nav-menu{display:flex;justify-content:space-between;padding:20px 0;background-color:#fff}.nav-item{margin-right:15px;color:#000}
2

Formeln tillämpas så här: (193 − 129) / 193 × 100 = 33,16 %. Kommentaren är borta, indragen och radbrytningarna är borta, 0px blev 0 och #ffffff/#000000 blev #fff/#000.

Den exakta procentsatsen beror på indata. Tätt skriven CSS med få kommentarer minskar mindre. CSS med många kommentarer och djupa indrag kan minska mer. Typiska stilmallar som minifieras med det här verktyget minskar med ungefär 20 % till 40 %.

Så använder du verktyget

  1. Klistra in CSS-kod i inmatningsfältet till vänster.
  2. Den minifierade versionen visas automatiskt till höger, utan att någon knapp behöver tryckas.
  3. Kontrollera procentsatsen för minskningen som visas ovanför resultatet.
  4. Välj ”Kopiera till urklipp” för att kopiera den minifierade CSS-koden och klistra sedan in den i en projektfil.
  5. Välj ”Rensa” för att tömma båda fälten och börja om.

Inget som skrivs in i verktyget skickas till en server; minifieringen körs i webbläsaren.

När CSS bör minifieras

Utvecklingsteam minifierar ofta CSS som ett steg i byggprocessen, med verktyg som Webpack eller npm-skript, så att ändringen sker automatiskt före varje driftsättning. Den läsbara källfilen med kommentarer finns kvar i versionshanteringen; endast produktionsbygget minifieras. Vanliga användningsområden för minifierad CSS är:

  • Stora webbplatser, till exempel nätbutiker, där en mindre stilmall innebär att sidan läses in snabbare.
  • Ensidiga applikationer som byggs med ramverk som React eller Vue, där CSS paketeras tillsammans med JavaScript.
  • Mobila webbsidor, där användarna oftare har en långsammare anslutning.
  • HTML-e-post, som ofta har strikta storleksbegränsningar.

CSS-minifiering och sidans hastighet

En mindre CSS-fil hämtas och tolkas snabbare, vilket kan förkorta tiden innan en sida blir synlig. Google har uppgett att sidans hastighet är en av de signaler som används vid sökrankning, så en snabbare sida kan vara en liten faktor bland många för hur en webbplats presterar i sökresultaten. Minifiering i sig garanterar inte någon förändring av rankningen; det är en av flera optimeringar, däribland bildkomprimering och serverns svarstid.

CSS-minifierare jämfört med CSS-formaterare

En minifierare komprimerar kod för produktion. En formaterare gör det motsatta: den tar komprimerad CSS och formaterar om den med indrag och radbrytningar så att en person kan läsa den igen. En formaterare kan inte återställa kommentarer eller ursprungliga variabelnamn som togs bort under minifieringen, eftersom den informationen är borta när den väl har raderats.

Vanliga frågor och svar

Hur mycket mindre blir CSS efter minifiering? Med det här verktyget blir den vanligtvis 20 % till 40 % mindre, beroende på hur många kommentarer, tomma rader och indrag den ursprungliga filen har. En fil som från början har lite formatering minskar mindre.

Ändrar minifiering av CSS hur en sida ser ut? Nej. Minifiering tar bara bort tecken som webbläsare ignorerar, till exempel kommentarer och extra blanksteg, och skriver om några likvärdiga värden (som #ffffff till #fff). Den renderade sidan förblir oförändrad.

Bör CSS minifieras under utvecklingen? Nej. Behåll den läsbara versionen med kommentarer medan koden skrivs och felsöks. Minifiera endast den kopia som skickas till en produktionsserver, vanligtvis som ett automatiskt steg i byggprocessen.

Kan minifierad CSS göras om till den ursprungliga filen? En formaterare kan formatera om minifierad CSS med indrag, men den kan inte återskapa borttagna kommentarer eller återställa beskrivande namn som aldrig fanns i den minifierade versionen. Behåll den ursprungliga källfilen.

Omvandlar det här verktyget färger i rgb() till hexadecimala färger eller slår det ihop duplicerade selektorer? Nej. Det förkortar hexadecimala färger och tar bort onödiga tecken, men skriver inte om värden i rgb()/hsl() och slår inte ihop upprepade selektorer. Vissa andra minifierare utför dessa extra steg.

Är minifiering samma sak som gzip-komprimering? Nej. Minifiering tar bort onödiga tecken ur själva källkoden. Gzip- (eller Brotli-)komprimering utförs av webbservern när filen skickas, med hjälp av en separat algoritm. När båda används tillsammans blir filen minst över nätverket.