Sådan bruger du det

Indsæt CSS i inputfeltet, åbn en .css-fil, eller prøv eksemplet.
Vælg Beautify for læsbar kode eller Minify for det mindste output.
Når du vælger Beautify, kan du vælge 2 mellemrum, 4 mellemrum eller tabulator.
Kopier resultatet, eller download det som en .css-fil. Hvis krøllede parenteser eller anførselstegn ikke er afbalancerede, viser fejlen linje og kolonne.

Sådan fungerer det

Formatoren opdeler først stilarket i tokens: strenge i enkelt- eller dobbelt anførselstegn, url(…)-værdier, kommentarer, krøllede parenteser og semikoloner. Fordi strenge og url() er enkelte tokens, forvirrer et semikolon inde i en data-URI eller en krøllet parentes inde i content: "{ }" aldrig strukturen, og deres indhold kopieres nøjagtigt.

Beautify sætter hver selector fra en selectorliste på sin egen linje, tilføjer mellemrum omkring børne-, søskende- og nabokombinatorerne (>, ~, +) og skriver hver deklaration som “property: value;” på sin egen linje. Blokke inde i @media, @supports, @layer, @container og indbygget CSS-nesting indrykkes et niveau pr. dybde. Et manglende semikolon efter den sidste deklaration i en blok tilføjes. Kommentarer beholdes, hvor de er.

Minify fjerner kommentarer (undtagen /*! … */ licensbemærkninger), kollapser mellemrum, fjerner mellemrum omkring krøllede parenteser, koloner, semikoloner, kommaer og selector-kombinatorer og dropper semikolonet før hver afsluttende krøllet parentes. Mellemrum, der ændrer betydningen, beholdes: efterkommer-kombinatoren i “.a .b”, mellemrummet i “a :focus” og mellemrummene inde i værdier som calc(100% - 2px). “! important” normaliseres til “!important”.

Værktøjet omskriver ikke værdier: farver, enheder og nuller efterlades som skrevet, og regler flettes eller omordnes ikke. SCSS- eller Less-filer med almindelig nesting fungerer normalt, men deres egen syntaks såsom // linjekommentarer eller mixins forstås ikke.

Eksempler

Læs en minificeret framework-fil

Indsæt et uddrag af en en-linjes bootstrap.min.css, og vælg Beautify med 2 mellemrum for at se hver regel, media queries og deres indlejrede regler på separate, indrykkede linjer.

Udgiv et håndskrevet stylesheet

Minificér et 12 KB stylesheet med kommentarer og indrykning, før du indsætter det inline i en e-mailskabelon eller i en sides head-sektion. Oversigten viser antallet af tegn før og efter.

Find en manglende klamme

Et stylesheet holder op med at virke halvvejs nede. Formateringsværktøjet rapporterer "Dette { lukkes aldrig med en tilsvarende }" med linjen for den regel, der mangler sin afsluttende klamme.

Ofte stillede spørgsmål

Er minificeret CSS fra dette værktøj sikkert at bruge i produktion?

Værktøjet fjerner kun kommentarer og mellemrum, som CSS ignorerer, så reglerne opfører sig ens. Det udfører ikke de dybere optimeringer fra buildværktøjer såsom at flette regler eller forkorte farver, så resultatet kan være en smule større end deres.

Hvorfor bevares et mellemrum i „a :focus“?

I en selector er et mellemrum descendant-kombinatoren. „a :focus“ betyder et fokuseret element inde i et link, mens „a:focus“ betyder et fokuseret link. Fjerner man mellemrummet, ændres hvilke elementer der matches.

Kan den formatere SCSS eller Less?

Almindelige indlejrede regler formateres korrekt. Syntaks, der kun findes i præprocessorer, såsom // kommentarer, mixins med argumenter eller @if-blokke, forstås ikke og kan blive formateret mærkeligt, så tjek resultatet.

Fjernes licenskommentarer ved minificering?

Kommentarer, der starter med /*!, bevares, hvilket er den almindelige konvention for licens- og copyrightbemærkninger. Alle andre kommentarer fjernes.

Privatliv

Din CSS behandles kun i din browser. Intet uploades, gemmes eller indgår i analyser.