Softonic

CSS-opmaker

Stap 1 / 2
CSS opmaken

U opent een productie-stylesheet in DevTools en alles staat op één regel. Deze opmaker pakt geminificeerde CSS uit tot een leesbare vorm: één declaratie per regel, inspringing van twee spaties en een lege regel tussen de regels. Hij werkt met ruwe CSS, de uitvoer van Sass of PostCSS en de CSS binnen inline <style>-blokken. De CSS die u plakt, wordt naar onze server gestuurd om te formatteren en wordt meegedragen in de paginalink terwijl u tussen de stappen van het hulpmiddel navigeert. Blokcommentaar wordt tijdens het formatteren verwijderd.

Zo formatteert u CSS

  1. 1

    Plak de CSS

    Op één regel geminificeerd, gedeeltelijk geformatteerd of al netjes. Het maakt de parser niet uit.

  2. 2

    Formatteren

    Klik op CSS formatteren. Elke declaratie krijgt een eigen regel met twee spaties inspringing en een lege regel scheidt de regels.

  3. 3

    Controleren

    Controleer de uitvoer. De volgorde van eigenschappen blijft behouden, maar blokcommentaar wordt verwijderd.

  4. 4

    Kopiëren

    Kopieer de geformatteerde CSS naar het klembord en plak hem terug in uw project.

Voor en na

Invoer (geminificeerd):

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

Uitvoer (geformatteerd):

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

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

Wat de opmaker doet

Gedrag Waarde
Declaraties Eén per regel, ingesprongen met twee spaties
Lege regel tussen regels 1
Openende accolade Op dezelfde regel als de selector
Sluitende accolade Op een eigen regel
Volgorde van eigenschappen Behouden, nooit opnieuw gesorteerd
Blokcommentaar Verwijderd tijdens het formatteren

Wat de opmaker verwijdert

/* Deze opmerking verdwijnt bij het formatteren */
.button { background: #2563eb; }

Blokcommentaar (/* ... */) wordt uit de uitvoer gehaald. Als u het nodig heeft, bewaar dan vóór het formatteren een kopie van het originele bestand.

Geneste regels (Sass / moderne CSS-nesting)

De opmaker springt geneste regels in op basis van hun diepte:

.card {
  padding: 1rem;

  & .title {
    font-weight: 600;
  }

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

Sass/Less-syntaxis (zonder &) wordt ook geaccepteerd. Sass-specifieke at-rules zoals @mixin, @include en @extend worden onaangetast doorgegeven maar niet diepgaand geherformatteerd. Gebruik voor volledige Sass-formattering een Sass-bewuste tool zoals Prettier.

Wanneer u niet moet formatteren

  • In productie: minificeer, formatteer niet. Geformatteerde CSS is 2 tot 3 keer groter dan geminificeerde.
  • Vóór een diff: formatteer beide kanten. Een geminificeerd bestand vergelijken met een net bestand levert onleesbare diffs op.
  • Binnen een build-pijplijn: laat Prettier of de opmaker van uw framework de consistentie regelen. Gebruik dit hulpmiddel voor eenmalige opschoning.

Veelgestelde vragen

Hij verwerkt standaard-CSS en CSS Nesting (de specificatie uit 2023). Sass-specifieke syntaxis zoals @mixin, @include, @extend en variabelen met $ wordt onaangetast doorgegeven maar niet diepgaand geherformatteerd. Gebruik voor volledige Sass-formattering een Sass-bewuste tool zoals Prettier.

Ja. Het formatteren gebeurt op onze server, dus de CSS die u plakt, wordt met elk formatteerverzoek meegestuurd en zit in de paginalink terwijl u tussen de stappen van het hulpmiddel navigeert. Hij wordt niet op een account opgeslagen en daarna niet hergebruikt.

Nee, als hij syntactisch geldig is. Witruimte in CSS is buiten waarden onbeduidend, en de opmaker herschikt alleen witruimte en regeleinden. De volgorde van declaraties en de waarden zelf blijven behouden.

Ja. Kopieer de CSS van binnen de <style>-tags, plak ze, formatteer en plak terug. De opmaker werkt alleen met CSS, plak dus de CSS-inhoud en niet de omringende HTML.

De opmaker verwijdert blokcommentaar (/* ... */) zodat de uitvoer uniform blijft. Wilt u het bewaren, sla dan vóór het formatteren een kopie van de oorspronkelijke CSS op.

Gerelateerde tools

ASCII-tabelreferentie

Volledige ASCII-tabel van 0 tot 127 met decimale, hexadecimale, octale en binaire waarden en HTML-numerieke referentienotatie, inclusief control codes zoals NUL, LF en DEL.

HTML-tekenreferentie

Een doorzoekbare lijst met HTML-entiteiten, hun benoemde en numerieke codes, plus kopiëren met één klik voor speciale tekens en symbolen.

Sneltoetsenoverzicht

Zoek gedocumenteerde standaardsneltoetsen voor VS Code, Chrome en Bash met GNU Readline op macOS, Windows en Linux.

E-mailvalidator

Valideer een e-mailadres: RFC 5322-syntaxcontrole, live MX-record-zoekopdracht, plus details over lokaal deel, domein en lengte. Er wordt geen e-mail verstuurd.

EditorConfig-generator

Genereer een .editorconfig-bestand met uw regels voor inspringstijl en -grootte, regeleinde, tekenset en witruimte voor consistente opmaak in alle IDE's en editors.

ASCII naar binair-converter

Converteer elke ASCII-string naar zijn binaire representatie. Elk teken wordt acht bits, gescheiden door spaties, klaar voor protocoltrace of huiswerk.

Tool beschikbaar in andere talen