Hvordan minifisere CSS trygt

Hvordan det fungerer

Minifikatoren fjerner /* kommenterer */, kollapser løp med mellomrom til et enkelt mellomrom, fjerner mellomrom rundt strukturell tegnsetting som { } : ; , >, og slipper det siste semikolonet før en avsluttende klammeparentes. Den endrer ikke navn på velgere, slår sammen regler eller omorganiserer kaskaden.

• En konservativ minifier: den fjerner ikke ubrukte regler eller omskriver verdier. Test alltid stilarket på nytt etterpå.

Hvorfor det betyr noe

Hver kilobyte med gjengivelsesblokkerende CSS forsinker første maling. Minifisering er den billigste gevinsten som er tilgjengelig etter å ha fjernet ubrukte regler, og et verktøy som bare berører beviselig overflødige tegn kan stoles på i et byggetrinn uten å redefinere stilarket ditt.

Et bearbeidet eksempel

En regel skrevet som .card { color: red; polstring: 10px 20px; } blir .card{color:red;padding:10px 20px}, og sparer noen få dusin byte per regel og mye mer på tvers av et ekte stilark.

Vanlige feil

• Fjerner mellomrom rundt + og - inne i calc(), som spesifikasjonen krever.
• Forminsker SCSS eller LESS i stedet for kompilert CSS.
• Hopp over den visuelle kontrollen etter minifisering.

Praktiske tips

Hold den uminifiserte kilden i versjonskontroll og minifiser som en byggeutgang. Hvis du bruker egendefinerte egenskaper med fallbacks, sammenligne de beregnede stilene i DevTools før og etter – kaskaden er bevart, men et enkelt tapt mellomrom kan endre hvordan en verdi analyseres.

Hvordan bruke den

1. Åpne verktøyet. Alt kjører i nettleserfanen.
2. Lim inn eller skriv inn input, og velg deretter handlingen du trenger.
3. Sjekk resultatet og kopier det med ett klikk.

Åpne verktøyet

Vanlige spørsmål