Sådan minificerer du CSS sikkert

Hvordan det virker

Minifieren fjerner /* kommenterer */, kollapser løb af mellemrum til et enkelt mellemrum, fjerner mellemrum omkring strukturel tegnsætning såsom { } : ; , >, og dropper det sidste semikolon før en afsluttende klammeparentes. Den omdøber ikke vælgere, fusionerer regler eller omorganiserer kaskaden.

• En konservativ minifier: den fjerner ikke ubrugte regler eller omskriver værdier. Test altid stilarket igen bagefter.

Hvorfor det betyder noget

Hver kilobyte af gengivelsesblokerende CSS forsinker første maling. Formindskelse er den billigste gevinst, der er tilgængelig efter at have fjernet ubrugte regler, og et værktøj, der kun rører bevisligt overflødige tegn, kan stole på i et byggetrin uden at omdefinere dit stylesheet.

Et bearbejdet eksempel

En regel skrevet som .card { color: red; polstring: 10px 20px; } bliver til .card{color:red;padding:10px 20px}, hvilket sparer et par dusin bytes pr. regel og meget mere på tværs af et rigtigt stylesheet.

Almindelige fejl

• Fjernelse af mellemrum omkring + og - inde i calc(), som specifikationen kræver.
• Formindskelse af SCSS eller LESS i stedet for kompileret CSS.
• Springer det visuelle tjek over efter minificering.

Praktiske tips

Behold den ikke-minificerede kilde i versionskontrol og minify som et build-output. Hvis du bruger brugerdefinerede egenskaber med fallbacks, skal du sammenligne de beregnede typografier i DevTools før og efter - kaskaden bevares, men et enkelt tabt rum kan ændre, hvordan en værdi analyserer.

Hvordan man bruger det

1. Åbn værktøjet. Alt kører i din browserfane.
2. Indsæt eller skriv dit input, og vælg derefter den handling, du har brug for.
3. Tjek resultatet og kopier det med et enkelt klik.

Åbn værktøjet

Almindelige spørgsmål