CSS minificering

CSS minificering er et gratis værktøj, der fjerner unødvendige tegn fra CSS og returnerer det minificerede stylesheet sammen med antallet af tegn før og efter.

Hvad gør CSS-minificering?

CSS-minificering reducerer antallet af tegn i et stylesheet ved at fjerne formatering, som browsere ikke har brug for. Det omfatter typisk indrykninger, linjeskift, kommentarer og valgfrie mellemrum omkring tegnsætning.

Browseren modtager stadig CSS-regler, selektorer og deklarationsværdier. Det tilsigtede visuelle resultat bør være uændret, mens den fil, der overføres til browseren, bliver mindre. Den praktiske gevinst ved at minificere et CSS-stylesheet afhænger af den oprindelige fil, HTTP-komprimering og browserens cache. Hvis et stylesheet allerede er komprimeret effektivt, kan reduktionen i overførte bytes være beskeden.

Minificering er nyttig før udrulning, ved gennemgang af usædvanligt stor CSS fra tredjeparter eller når du vil undersøge, hvor meget udviklingsformateringen fylder i en fil. Det er ikke det samme som optimering, der fjerner ubrugte selektorer, samler ens regler eller omskriver deklarationer. Værktøjet hævder ikke at udføre disse mere omfattende handlinger.

Hvordan bruger jeg CSS minificering?

Indsæt et stylesheet i feltet CSS, og kør værktøjet. Kopiér derefter resultatet under Minificeret CSS til den relevante build- eller udrulningsproces. Behold den læsbare CSS-kildefil i stedet for permanent at erstatte den med den minificerede kopi.

1. Start med den CSS-kildekode, som dit website eller din applikation bruger.
2. Kontrollér, at den fortolkes korrekt, før du minificerer den.
3. Indsæt den i CSS, og kør værktøjet.
4. Sammenlign CSS-tegn med Tegn i minificeret CSS.
5. Test resultatet på en testside, herunder responsive visninger, udskriftsformater og interaktive komponenter.

CSS-minificeringen foregår på serveren. Den CSS, du indsender, sendes til serveren via HTTPS og gemmes ikke. Hvis stylesheetet indeholder fortrolige URL'er, interne værtsnavne eller andet følsomt materiale, bør du overveje, om det er i overensstemmelse med organisationens retningslinjer at sende det til et serverbaseret værktøj.

Hvordan læser jeg resultatet?

Resultatet indeholder den behandlede CSS og to tegntal, så du kan gennemgå outputtet og se reduktionen direkte. CSS-tegn er længden på den indsendte tekst, mens Tegn i minificeret CSS er længden efter minificering.

Tallene angiver antallet af tegn beregnet med en længdefunktion, der understøtter multibyte-tegn. De bør ikke opfattes som en præcis forudsigelse af størrelsen ved netværksoverførsel. UTF-8-tegn kan fylde mere end én byte, og komprimering med Brotli eller gzip kan ændre den størrelse, der sendes via HTTP, betydeligt.

Værktøjet viser ikke et særskilt felt til validering eller fejl. Det bør derfor ikke bruges som CSS-validator. Almindelige problemer som uparrede klammeparenteser, et manglende kolon, en uafsluttet tekststreng, ugyldige kommentarer eller ugyldig indlejring skal kontrolleres med browserens udviklerværktøjer, en linter eller en validator, der tager højde for standarderne. Ugyldig CSS kan give et kompakt output, som alligevel ikke fungerer efter hensigten.

Små eksempler på CSS-minificering

En almindelig minificeret version fjerner formateringen, men bevarer selve reglen.

CSS

p { color: red; }

Minificeret CSS

p{color:red}

I dette eksempel indeholder det læsbare input 17 tegn, mens den kompakte udgave indeholder 12. Mellemrum og tegnsætning i tekststrenge med anførselstegn skal bevares som en del af værdien.

CSS

.notice, .warning { color: #c00; margin: 0 1rem; }

Minificeret CSS

.notice,.warning{color:#c00;margin:0 1rem}

Det er ikke sikkert blot at slette alle mellemrum. Mellemrum kan fungere som en efterkommer-kombinator, og regneoperatorer i funktioner som calc() er underlagt krav om mellemrum. Tekststrenge, data-URL'er, escapede identifikatorer og værdier i brugerdefinerede egenskaber kræver også syntaksbevidst behandling.

Tegn med accenter og tegn fra andre alfabeter end det latinske kan forekomme i tekststrenge og, hvis CSS-reglerne for identifikatorer tillader det, i selektorer. Tal, decimaltegn, procentangivelser og enheder er syntaks og ikke dekorativ tekst. De kan derfor ikke uden videre forkortes, uden at deklarationen forstås. Et tomt stylesheet indeholder ingen CSS, der kan minificeres. Til meget store stylesheets er en minificering under build-processen som regel nemmere at gentage og kontrollere end at kopiere tekst gennem en onlineformular.

Hvornår kan CSS-minificering ikke betale sig?

Det kan normalt ikke betale sig at gentage minificeringen, hvis en fil allerede er minificeret eller genereret som en kompakt produktionsfil. Endnu en CSS-minificering kan give en meget lille eller slet ingen besparelse, samtidig med at endnu et behandlingstrin føjes til udgivelsesprocessen.

• Undlad at formatere CSS læsevenligt og derefter minificere den igen, hvis den kun skal læses af en browser eller et build-system.
• Brug ikke minificering som erstatning for at fjerne ubrugte framework-regler eller dublerede deklarationer.
• Forvent ikke, at en reduktion i antallet af tegn afslører renderingsblokerende forespørgsler, cacheproblemer eller langsom indlæsning af skrifttyper.
• Kassér ikke den formaterede kildekode, især ikke hvis du skal fejlfinde specificitet, cascade layers eller media queries.

Hvis CSS samles automatisk, bør du bruge minificeringsværktøjet i den samme pipeline, så alle udgivelser følger de samme indstillinger. Når relaterede filer udrulles manuelt, kan HTML minificering og JS minificering udføre den tilsvarende handling på disse filtyper.

Ofte stillede spørgsmål

Ændrer minificering specificiteten af CSS-selektorer?

Korrekt minificering ændrer ikke selektorernes specificitet, fordi selektorerne bør beholde de samme dele i samme rækkefølge. Gennemgå alligevel komplekse selektorer omhyggeligt, hvis kildekoden bruger escape-sekvenser, nyere pseudoklasser eller genereret syntaks, som et ældre minificeringsværktøj måske ikke forstår.

Kan jeg minificere brugerdefinerede CSS-egenskaber?

Brugerdefinerede egenskaber kan medtages, men deres værdier kan være nødt til at bevare tokens og mellemrum til senere indsættelse med var(). Test deklarationer med beregninger, reserveværdier eller indlejrede tekststrenge i de browsere, som projektet understøtter, i stedet for at antage, at alle synlige mellemrum er valgfrie.

Opretter værktøjet et source map?

Der vises ikke noget source map i resultatet. Hvis fejlfinding i produktion kræver, at kompakt CSS kan føres tilbage til Sass, Less eller en anden kilde, skal du generere den minificerede fil og dens source map i den compiler eller bundler, som kender den oprindelige filstruktur.

Bevares licenskommentarer i outputtet?

Du bør ikke gå ud fra, at CSS-kommentarer bevares. Hvis licensen til en afhængighed kræver, at en meddelelse følger med den distribuerede kode, skal du gemme meddelelsen separat eller kontrollere det genererede output før udgivelsen.

Kan minificering reparere CSS, der ikke virker?

Nej. Minificering fjerner unødvendige tegn, men reparerer ikke en ugyldig selektor, en egenskab uden understøttelse, en manglende ressource eller en forkert cascade. Ret først advarsler om fortolkning og visuelle fejl i kildekoden.

Kontrol før udrulning

Gem det minificerede output som en separat produktionsfil, kontrollér, at URL'er og indhold i anførselstegn er intakte, og indlæs filen på en testside med browserkonsollen åben. Sammenlign repræsentative sider ved smalle og brede visningsbredder. Bekræft derefter, at serveren anvender den forventede indholdstype, cachepolitik og HTTP-komprimering.