Hoppa till innehåll

CSS-formaterare

Formatera minifierade eller röriga stilmallar med den här CSS-formateraren. Klistra in CSS så parsar verktyget innehållet och skriver sedan ut varje regel med sin väljare på en rad, en deklaration per rad med två blankstegs indrag, ett blanksteg efter varje kolon, blanksteg runt kombinatorer och nästlade at-regler som mediafrågor. Parsningsfel rapporteras. Perfekt för webbutvecklare och designers som läser, felsöker eller granskar stilmallar från valfri källa.

Återställ

Vanliga frågor

Hur fungerar CSS-formateraren?

Den parsar stilmallen till regler, deklarationer och at-regler och skriver sedan ut dem igen i en enhetlig layout. Eftersom CSS parsas återger resultatet stilmallens faktiska struktur.

Hur ser den formaterade CSS ut?

Varje regel börjar med sin selektor och en inledande klammerparentes. Varje deklaration står på en egen rad med två blankstegs indrag och ett blanksteg efter kolon. Den avslutande klammerparentesen står på en egen rad. Selektorlistor sammanfogas med ett kommatecken och ett blanksteg, och kombinatorer som > och ~ omges av blanksteg.

Stöds mediefrågor och andra at-regler?

Ja, regler inuti @media, @supports och liknande block nästlas och indenteras. Satser som @import behålls på en rad, med url()-värden skrivna inom citationstecken.

Vad händer vid ogiltig CSS?

När parsern inte kan läsa formatmallen, till exempel för att en klammerparentes saknas, avbryts verktyget och visar parserns meddelande med radnumret. Åtgärda den angivna platsen och formatera igen.

Bevaras kommentarer?

Ja, kommentarer behålls både mellan regler och mellan deklarationer. Varje kommentar placeras på en egen rad med samma indrag som den omgivande koden.

Stöds anpassade egenskaper?

Ja, anpassade egenskaper som --brand-color formateras som alla andra deklarationer. Referenser som var(--brand-color) behålls som de är skrivna.

Kan jag formatera SCSS eller Less här?

Nej, den här sidan förväntar sig vanlig CSS, och nästlade regler eller variabler från förbehandlare kan avvisas. Använd SCSS Formatter eller Less Formatter för de filerna.

Kan jag ändra indrag eller klammerstil?

Nej, formateraren har inga alternativ och använder alltid två blanksteg, med den inledande klammerparentesen på samma rad som selektorn. Det gör resultaten enhetliga för alla formatmallar.

Varför omges resultatet av ett css-kodstaket?

Utdata returneras som ett Markdown-kodblock märkt css, så att det visas med syntaxmarkering i Markdown. Kopiera raderna mellan staketen till din .css-fil.

Hur stor kan min formatmall vara?

Upp till 5 MB per körning. Större indata avvisas med ett meddelande. Utdata är identiska med alternativet CSS i Code Formatter.

Om OneClick Pro

OneClick Pro är en kostnadsfri samling med mer än 150 webbverktyg för det dagliga arbetet: konvertera bilder och enheter, formatera och validera kod, kontrollera domäner och SEO samt arbeta med text, datum och tal. Alla verktyg fungerar utan registrering eller prenumeration, och det du anger används bara för att beräkna resultatet och sparas aldrig. Använd samlingen som en snabb verktygslåda för enstaka uppgifter eller bokmärk verktygen du använder varje dag.