Ordna CSS-regler och deklarationer

Utvecklare använder CSS-formaterare före kodgranskning, felsökning eller överlämning till en annan medarbetare.

Ordna CSS-regler och deklarationer, så att granskning, redigering och felsökning blir enklare. Använd det gratis direkt i webbläsaren, utan konto.

Så använder du

  1. Klistra in din stilmall i inmatningsområdet, eller importera en av de accepterade kodfilerna.
  2. Starta formateringen; regler och deklarationer kommer tillbaka med jämn indentering och tydliga radbrytningar.
  3. Läs igenom utdata och hitta de block som såg trånga eller felordnade ut i originalfilen.
  4. Kopiera den städade versionen till din editor och jämför den med källan innan du checkar in något.
  5. Rensa inmatningen innan du klistrar in en annan fil, så att ett projekt i taget fyller resultatområdet.

Exempel

En utvecklare ärver en stilmall som skrivits i ett enda svep, med allt packat på några få rader. Klistra in den här, ta tillbaka den indenterade versionen och läs den block för block: selektorer står i linje och varje deklaration ligger på sin egen rad.

Gränser och format

Var bearbetningen sker

Formateringen körs i din webbläsare. Koden du klistrar in kopieras inte någonstans och försvinner när du stänger sidan, så att arbeta med utdrag från ett privat projekt innebär ingen extra risk.

Vanliga frågor

Kommer formateringen att ändra hur min sida ser ut?

Nej. Endast avstånd, radbrytningar och indentering påverkas. Selektorer, egenskaper och värden förblir exakt desamma, så webbläsaren läser stilmallen på samma sätt som tidigare och den renderade sidan flyttas inte.

Kan jag formatera en mycket stor stilmall?

Det beror mest på minnet i din enhet, eftersom allt arbete sker i webbläsaren. På en stor fil kan sidan bli långsammare; dela upp stilmallen i delar och kör dem efter varandra i stället.

Varför innehåller utdata fortfarande en mycket lång rad?

Vissa värden är helt enkelt långa, till exempel en teckensnittsstack eller en djupt nästlad funktion. Formateraren delar inte upp värden inuti en deklaration; den koncentrerar sig på strukturen hos regelblocken.

Verktyg i samma kategori