Så här använder du det

Klistra in CSS i inmatningsfältet, öppna en .css-fil eller prova exemplet.
Välj Beautify för läsbar kod eller Minify för minsta möjliga resultat.
Vid läsbar formatering väljer du 2 mellanslag, 4 mellanslag eller tabbar.
Kopiera resultatet eller ladda ner det som en .css-fil. Om klammerparenteser eller citattecken är obalanserade visar felet rad och kolumn.

Så fungerar det

Formateraren delar först upp stilmallen i token: strängar inom enkla eller dubbla citattecken, url(…)-värden, kommentarer, klamrar och semikolon. Eftersom strängar och url() är enskilda token kan ett semikolon inuti en data-URI eller en klammer inuti content: "{ }" aldrig förvirra strukturen, och deras innehåll kopieras exakt.

Beautify placerar varje selektor i en selektorlista på en egen rad, lägger till blanksteg runt barn-, syskon- och intilliggande kombinatorer (>, ~, +) och skriver varje deklaration som ”property: value;” på en egen rad. Block inuti @media, @supports, @layer, @container och native CSS-nesting indenteras en nivå per djup. Ett saknat semikolon efter den sista deklarationen i ett block läggs till. Kommentarer behålls där de står.

Minify tar bort kommentarer (förutom /*! … */ licensmeddelanden), slår ihop blanktecken, tar bort blanksteg runt klamrar, kolon, semikolon, kommatecken och selektorkombinatorer, och tar bort semikolonet före varje avslutande klammer. Mellanslag som ändrar betydelsen behålls: ättlingkombinatorn i ”.a .b”, mellanslaget i ”a :focus” och mellanslagen inuti värden som calc(100% - 2px). ”! important” normaliseras till ”!important”.

Verktyget skriver inte om värden: färger, enheter och nollor lämnas som de är skrivna, och regler slås inte ihop eller sorteras om. SCSS- eller Less-filer med vanlig nästling fungerar oftast, men deras egen syntax, till exempel // radkommentarer eller mixins, förstås inte.

Exempel

Läsa en minifierad ramverksfil

Klistra in ett utdrag ur bootstrap.min.css på en rad och välj Beautify med 2 blanksteg för att se varje regel, media queries och deras nästlade regler på separata, indragna rader.

Publicera en handskriven stilmall

Minifiera en stilmall på 12 KB med kommentarer och indrag innan du lägger till den inline i en e-postmall eller i sidans head. Sammanfattningen visar antalet tecken före och efter.

Hitta en saknad klammerparentes

En stilmall slutar tillämpas halvvägs ner. Formateraren rapporterar ”Detta { stängs aldrig med ett matchande }” med raden för regeln som saknar sin avslutande klammerparentes.

Vanliga frågor

Är minifierad CSS från det här verktyget säker att använda i produktion?

Verktyget tar bara bort kommentarer och blanktecken som CSS ignorerar, så reglerna beter sig likadant. Det gör inte de djupare optimeringar som byggverktyg gör, som att slå ihop regler eller förkorta färger, så resultatet kan bli något större än deras.

Varför behålls ett mellanslag i ”a :focus”?

I en selektor är ett mellanslag kombinatorn för avkomling. ”a :focus” betyder ett fokuserat element inuti en länk, medan ”a:focus” betyder en fokuserad länk. Om du tar bort mellanslaget ändras vilka element som matchas.

Kan den formatera SCSS eller Less?

Vanliga nästlade regler formateras korrekt. Syntax som bara finns i preprocessorer, som //-kommentarer, mixins med argument eller @if-block, förstås inte och kan formateras konstigt, så kontrollera resultatet.

Tas licenskommentarer bort vid minifiering?

Kommentarer som börjar med /*! behålls, vilket är den vanliga konventionen för licens- och upphovsrättsmeddelanden. Alla andra kommentarer tas bort.

Integritet

Din CSS bearbetas endast i din webbläsare. Inget laddas upp, lagras eller ingår i analys.