CSS-formatering og -minificering

Sådan formaterer eller minificerer du CSS

1. Indsæt dit stylesheet, eller klik på Åbn fil for at indlæse en .css-fil (op til 10 MB).
2. Vælg Indrykning (2 mellemrum, 4 mellemrum eller en tabulator), og om du vil have Tom linje mellem regler.
3. Klik på Formatér (beautify) for at få læsbar kode, eller på Minificér for at få den mindst mulige version.
4. Ved minificering bør du lade Slå regler sammen ved minificering være afkrydset for det bedste resultat og Behold /*! kommentarer */ være afkrydset for at bevare licenshoveder.
5. Kopiér eller download resultatet. Statuslinjen viser størrelsen før og efter i bytes og den procentdel, der er sparet.

Hvis en tuborgklamme mangler, stopper værktøjet og fortæller dig, på hvilken linje den uafsluttede { eller den overskydende } står, i stedet for at lave ødelagt output.

Formatér: læsbar og ensartet CSS

Formatér (beautify) bruger js-beautify, den formatering, som findes i mange kodeeditorer. Den sætter hver deklaration på sin egen linje, rykker indholdet af hver regel og af at-regler som @media og @supports ind, skriver hver vælger i en gruppe på sin egen linje og sætter et mellemrum efter kolonet i hver deklaration. Eksisterende tomme linjer bevares (højst én ad gangen), så de logiske afsnit i din fil stadig er synlige. Formateringen ændrer aldrig værdier, rækkefølgen af regler eller vælgernes betydning: Den ændrer kun mellemrum.

Det er nyttigt til at læse minificeret CSS fra et website, til at gennemgå et stylesheet, som et værktøj har genereret, eller til at rydde op i en fil, flere personer har redigeret med forskellige vaner.

Minificér: mindre CSS med csso

Minificér bruger csso (CSS Optimizer), en strukturel minificering. Ud over at fjerne mellemrum og kommentarer omskriver den stylesheetet til en tilsvarende, kortere form:

• farver forkortes (#ff0000 bliver til red, #ffffff bliver til #fff);
• enheder og nuller forenkles (0px bliver til 0, 0.5em bliver til .5em);
• dublerede deklarationer fjernes, og shorthand-egenskaber slås sammen, når det er sikkert;
• med Slå regler sammen ved minificering grupperes regler med identiske deklarationer (a{color:red} b{color:red} bliver til a,b{color:red}), og tilsidesatte deklarationer fjernes.

Omstrukturering er sikker for normale stylesheets, men den flytter deklarationer. Hvis din CSS afhænger af en meget bestemt kaskaderækkefølge, for eksempel browserhacks, skal du fjerne markeringen: csso komprimerer så kun hver regel på stedet.

Kommentarer fjernes, bortset fra »vigtige« kommentarer, der begynder med /*!, og som ofte bruges til licenser. Fjern markeringen ved Behold /*! kommentarer */ for at fjerne dem også.

Størrelse før og efter

Statuslinjen sammenligner størrelsen af input og resultat i UTF-8-bytes. Formateret kode er som regel større end originalen. Minificeret kode sparer typisk 20 til 50 % på håndskrevet CSS. Husk, at servere også komprimerer filer med gzip eller Brotli, så besparelsen ved overførslen er mindre end det rå tal, men minificering reducerer stadig parsingtiden og størrelsen af cachede filer.