Orden CSS-regels en declaraties

Ontwikkelaars gebruiken CSS-formatter vóór een codereview, foutopsporing of overdracht aan een andere bijdrager.

Orden CSS-regels en declaraties, zodat nakijken, aanpassen en fouten zoeken eenvoudiger worden. Gebruik het in je browser zonder account.

Hoe te gebruiken

Plak uw stylesheet in het invoergebied, of importeer een van de toegestane codebestanden.
Start de formatteringsrun; regels en declaraties komen terug met gelijkmatige inspringing en duidelijke regeleinden.
Lees de uitvoer door en herken de blokken die in het oorspronkelijke bestand opgepropt of ongeordend leken.
Kopieer de opgeruimde versie naar uw editor en vergelijk deze met de bron voordat u iets commit.
Leeg de invoer voordat u een ander bestand plakt, zodat telkens één project het resultaatgebied vult.

Voorbeeld

Een ontwikkelaar erft een stylesheet dat in één lange haast is geschreven, met alles op een paar regels gepropt. Plak het hier, neem de ingesprongen versie terug en lees die blok voor blok: selectors staan onder elkaar, en elke declaratie staat op zijn eigen regel.

Limieten en formaten

Syntaxfouten blijven onaangeroerd, dus een ontbrekende puntkomma blijft ontbreken na de bewerking.
Dit hulpmiddel verandert alleen de presentatie: het hernoemt geen klassen en verwijdert geen regels die u niet meer gebruikt.
Toegestane bestanden zijn HTML, CSS, JavaScript, JSON en SQL, terwijl een binair bestand hier niet leesbaar zal zijn.
Bij een zeer kort stylesheet voegt de automatische inspringing weinig toe, dus controleer of de uitvoer zich nog precies hetzelfde gedraagt als de invoer.

Waar de verwerking gebeurt

De formattering werkt in uw browser. De code die u plakt wordt nergens gekopieerd en verdwijnt wanneer u de pagina sluit, dus werken met fragmenten uit een privéproject brengt geen extra risico met zich mee.

Veelgestelde vragen

Verandert formatteren hoe mijn pagina eruitziet?

Nee. Alleen spaties, regeleinden en inspringing worden aangeraakt. Selectors, eigenschappen en waarden blijven exact hetzelfde, dus de browser leest het stylesheet op dezelfde manier als voorheen en de weergegeven pagina verschuift niet.

Kan ik een zeer groot stylesheet formatteren?

Het hangt vooral af van het geheugen van uw apparaat, aangezien al het werk in de browser gebeurt. Bij een groot bestand kan de pagina traag worden; splits het stylesheet in delen en laat ze na elkaar lopen.

Waarom bevat de uitvoer nog steeds een zeer lange regel?

Sommige waarden zijn nu eenmaal lang, zoals een lettertypestapel of een diep geneste functie. De formatter breekt waarden binnen een declaratie niet op; hij richt zich op de structuur van de regelblokken.