Softonic

CSS-formaterare

Steg 1 / 2
Formatera CSS

Du öppnar ett produktionsstilmall i DevTools och allt ligger på en enda rad. Den här formateraren packar upp minifierad CSS till en läsbar form: en deklaration per rad, två blankstegs indrag och en tom rad mellan reglerna. Den fungerar med rå CSS, utdata från Sass eller PostCSS och CSS:en i inbäddade <style>-block. Den CSS du klistrar in skickas till vår server för formatering och följer med i sidans länk medan du går mellan verktygets steg. Blockkommentarer tas bort vid formateringen.

Så formaterar du CSS

  1. 1

    Klistra in CSS

    Minifierad på en rad, delvis formaterad eller redan snygg. Parsern bryr sig inte.

  2. 2

    Formatera

    Klicka på Formatera CSS. Varje deklaration hamnar på en egen rad med två blankstegs indrag, och en tom rad skiljer reglerna åt.

  3. 3

    Granska

    Kontrollera resultatet. Egenskapsordningen bevaras, men blockkommentarer tas bort.

  4. 4

    Kopiera

    Kopiera den formaterade CSS:en till urklipp och klistra tillbaka den i ditt projekt.

Före och efter

Indata (minifierad):

.btn{background:#2563eb;color:#fff;padding:.5rem 1rem;border-radius:6px}.btn:hover{background:#1d4ed8}

Utdata (formaterad):

.btn {
  background: #2563eb;
  color: #fff;
  padding: .5rem 1rem;
  border-radius: 6px;
}

.btn:hover {
  background: #1d4ed8;
}

Vad formateraren gör

Beteende Värde
Deklarationer En per rad, indragna med två blanksteg
Tom rad mellan regler 1
Öppnande klammer På samma rad som selektorn
Stängande klammer På egen rad
Egenskapsordning Bevaras, sorteras aldrig om
Blockkommentarer Tas bort vid formateringen

Vad formateraren tar bort

/* Den här kommentaren försvinner vid formateringen */
.button { background: #2563eb; }

Blockkommentarer (/* ... */) tas bort från utdatan. Om du behöver dem, spara en kopia av originalfilen innan du formaterar.

Nästlade regler (Sass / modern CSS-nästling)

Formateraren indrar nästlade regler efter deras djup:

.card {
  padding: 1rem;

  & .title {
    font-weight: 600;
  }

  &:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  }
}

Sass/Less-syntax (utan &) accepteras också. Sass-specifika at-regler som @mixin, @include och @extend skickas igenom oförändrade men omformateras inte på djupet. För fullständig Sass-formatering, använd ett Sass-medvetet verktyg som Prettier.

När du inte ska formatera

  • I produktion: minifiera, formatera inte. Formaterad CSS är 2–3 gånger större än minifierad.
  • Före en diff: formatera båda sidorna. Att jämföra en minifierad fil med en snygg ger oläsbara diffar.
  • Inuti en byggkedja: låt Prettier eller ditt ramverks formaterare sköta konsekvensen. Använd det här verktyget för engångsstädning.

Vanliga frågor

Den hanterar standard-CSS och CSS Nesting (specifikationen från 2023). Sass-specifik syntax som @mixin, @include, @extend och variabler med $ skickas igenom oförändrad men omformateras inte på djupet. För fullständig Sass-formatering, använd ett Sass-medvetet verktyg som Prettier.

Ja. Formateringen körs på vår server, så den CSS du klistrar in skickas med varje formateringsförfrågan och följer med i sidans länk medan du går mellan verktygets steg. Den sparas inte på något konto och återanvänds inte efteråt.

Nej, om den är syntaktiskt giltig. Blanksteg i CSS är obetydliga utanför värden, och formateraren omordnar bara blanksteg och radbrytningar. Deklarationsordningen och värdena i sig bevaras.

Ja. Kopiera CSS:en inifrån <style>-taggarna, klistra in den, formatera och klistra tillbaka. Formateraren arbetar bara med CSS, så klistra in CSS-innehållet, inte den omgivande HTML:en.

Formateraren tar bort blockkommentarer (/* ... */) så att utdatan blir enhetlig. Om du vill behålla dem, spara en kopia av den ursprungliga CSS:en innan du formaterar.

Relaterade verktyg

ASCII-tabellreferens

Full ASCII-tabell från 0 till 127 med decimal-, hex-, oktal- och binärvärden samt notation för numeriska HTML-referenser, inklusive NUL, LF och DEL.

HTML-teckenreferens

En sökbar lista över HTML-entiteter med deras namngivna och numeriska koder samt kopiering med ett klick för specialtecken och symboler.

Referens för kortkommandon

Sök dokumenterade standardkommandon för VS Code, Chrome och Bash med GNU Readline i macOS, Windows och Linux.

Färgpalettgenerator

Skapa monokromatiska, analoga, komplementära, triadiska eller tetradiska färgpaletter från en HEX-basfärg och exportera kopieringsklara CSS-variabler.

Slumpgenerator för bokstäver

Generera slumpade A-Z-bokstäver. Välj antal, versaler, gemener eller blandat läge och använd resultatet för spel, uppgifter eller klassrumsaktiviteter.

Slumpmässig färggenerator

Generera 1 till 50 slumpmässiga HEX-färger med färgrutor som du kan förhandsvisa, kopiera och använda i CSS, tester eller palettskissning.