Sådan minimerer du CSS manuelt
CSS styrer blandt andet farver, afstande, skrifttyper og placering på websider. CSS-minificering betyder, at unødvendige tegn og mellemrum fjernes fra et CSS-dokument, så teksten fylder mindre. Målet er at bevare de samme stilregler og dermed det samme udseende, mens koden bliver mere kompakt. Det er en ændring af kodens form, ikke af dens funktion.
Hvad CSS-minificering gør
Et CSS-dokument kan være formateret med linjeskift, indryk og mellemrum, så det er let at læse. Disse tegn hjælper mennesker med at overskue koden, men de fleste af dem er ikke nødvendige for browserens fortolkning. Minificering fjerner derfor typisk kommentarer, unødige linjeskift og mellemrum omkring skilletegn.
For eksempel kan flere mellemrum mellem en egenskab og dens værdi reduceres til ét, og et linjeskift mellem regler kan fjernes. Semikolon og klammer har derimod betydning for, hvor regler begynder og slutter. De må kun ændres eller fjernes, når syntaksen fortsat er gyldig. Værdier, selektorer og rækkefølgen af regler skal også bevares, da ændringer her kan påvirke resultatet.
Sådan gør du det trin for trin
Lav først en kopi af CSS-filen. Behold originalen, så du kan sammenligne og gendanne den, hvis en ændring giver fejl.
Læs reglerne igennem, og fjern kommentarer, der ikke er nødvendige for forståelsen eller vedligeholdelsen. Kommentarer kan indeholde noter, som er nyttige for andre, så vurder deres betydning, før de slettes.
Fjern linjeskift og indryk, og reducer gentagne mellemrum. Behold dog det mellemrum, der er nødvendigt for at adskille ord eller værdier. Hvis to dele af en selektor eller værdi kommer til at hænge sammen, kan browseren fortolke dem anderledes.
Gennemgå skilletegn og afslutninger. Kontroller, at hver regel stadig har de nødvendige klammer, kolon og semikoloner. Vær særlig forsigtig, hvis du fjerner et afsluttende semikolon: det kan kun undværes, når det ikke ændrer syntaksen.
Sammenlign den ændrede kode med originalen, og kontrollér den i den sammenhæng, hvor CSS-filen bruges. Se efter manglende regler, ændrede værdier og forskelle i visningen på relevante skærmstørrelser.
Hvor CSS-minificering bruges
Minificeret CSS bruges ofte som en del af klargøringen af webfiler til offentlig visning. En mindre tekstfil kan fylde mindre ved overførsel, hvilket kan være nyttigt, når en side indlæses over et netværk. Gevinsten afhænger blandt andet af, hvor omfattende filen er, og hvordan den leveres. Minificering ændrer ikke i sig selv billeder, skrifttyper eller andre filer.
I almindeligt udviklingsarbejde gemmes den læsbare udgave ofte separat fra den minificerede udgave. Det gør det lettere at rette og vedligeholde reglerne uden at skulle arbejde direkte i en tæt pakket tekst. En tydelig arbejdsgang mindsker også risikoen for, at senere ændringer overskriver den oprindelige kode eller skaber fejl, som er svære at finde.
Begrænsninger og kontrol
Minificering er ikke det samme som at gøre CSS mere effektiv eller at fjerne regler, der ikke bruges. Den reducerer primært tekstens størrelse ved at fjerne formatering og kommentarer. Hvis selve reglerne skal ændres eller forenkles, kræver det en særskilt gennemgang af deres virkning.
Kontrollér derfor altid resultatet efter ændringer. CSS kan være følsom over for små forskelle i mellemrum, tegnsætning og rækkefølge. Hvis udseendet ændrer sig, kan du sammenligne den kompakte kode med originalen og føre de nødvendige tegn eller regler tilbage.