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

JSON naar PHP-array

Zet JSON om naar een PHP-array-literal met korte syntaxis, associatieve/geïndexeerde arrays en geneste structuren, klaar om in een .php-bestand te plakken.

Luhn-algoritme-checker

Controleer de creditcardnummer, IMEI, SIN en andere door Luhn beschermden nummers. Geef een resultaat terug (goed of fout) en toon elke stap van het verdubbelen en het berekenen van de controlesom aan.

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.

Telefoonnummers controleren

Controleer de structuur van telefoonnummers per land en bekijk regio, type en E.164-, internationale, nationale en RFC 3966-notatie.

SVG-golfgenerator

Genereer een vloeiende SVG-golfscheiding voor headers en footers met instelbare amplitude, frequentie, kleur en positie boven of onder. Kopieer de SVG-code.

Sneltoetsenoverzicht

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

Tool beschikbaar in andere talen