CSS Beautifier & Minifier

Lijn rommelige CSS opnieuw uit om het te lezen, of minificeer het voor productie — met een veilige modus die de volgorde van je regels nooit verandert.

Inspringen
Compressie
Plak of typ CSS om de opmaak te verbeteren of te minificeren.

Je CSS wordt geformatteerd en geminificeerd in je browser. Er wordt niets geüpload naar BroBroGo.

Veelgestelde vragen

Wat is het verschil tussen opmaak verbeteren en minificeren?

Opmaak verbeteren (beautify) herstructureert de inspringing en witruimtes van je stijlen zodat ze makkelijk te lezen en te bewerken zijn. Minificeren (minify) doet het tegenovergestelde: het verwijdert witruimtes en opmerkingen die een browser niet nodig heeft en verkort waarden zoals kleuren, waardoor het bestand kleiner wordt en sneller laadt. Verbeter de opmaak tijdens het werken, minificeer voordat je live gaat.

Wat doen de compressie-instellingen Veilig en Geoptimaliseerd?

Veilig verwijdert alleen witruimtes en opmerkingen en verkort waarden, waarbij elke regel exact blijft staan waar je hem hebt geschreven. Geoptimaliseerd gaat verder en voegt dubbele selectors en regels samen voor een nog kleiner bestand — dit kan de volgorde van regels veranderen, dus bij stylesheets die leunen op de bronvolgorde is een snelle controle aanbevolen. Opmerkingen die gemarkeerd zijn als /*! … */ worden in beide modi behouden.

Verandert minificeren hoe mijn pagina eruitziet?

In de Veilige modus niet — je stijlen worden exact hetzelfde weergegeven. Het verwijdert witruimte, wist gewone opmerkingen en herschrijft waarden in kortere gelijkwaardige vormen (zoals #ffffff naar #fff), en het verandert nooit je vendor prefixes of moderne syntaxis. De Geoptimaliseerde modus voegt ook regels samen; dit ziet er op bijna elke stylesheet identiek uit, maar het is de moeite waard om te controleren als je stylesheet afhankelijk is van de volgorde van de regels.

HTML Beautifier & MinifierLijn rommelige HTML opnieuw uit om het te lezen, of minificeer het voor productie — met een optionele controle op kapotte tags.SVG OptimizerSchoon SVG-code op en verklein het bestand zonder de afbeelding te veranderen.JavaScript Beautifier & MinifierLijn geminificeerde of geobfusteerde JavaScript opnieuw uit zodat je het kunt lezen, of minificeer je eigen code om deze kleiner te maken voor productie.CSS clamp() CalculatorVoer een grootte in voor kleine en grote schermen en krijg een vloeiende clamp()-waarde die er prachtig tussenin schaalt — voor lettergroottes, padding, marges of gaps.Gradient GeneratorOntwerp een lineair, radiaal of conisch verloop, voeg kleurstops toe, bepaal de richting en kopieer direct de CSS.Box Shadow GeneratorSleep schuifregelaars om een box-shadow te maken, stapel lagen voor extra diepte en kopieer direct de voltooide CSS.KleurconverterConverteer kleuren tussen HEX, RGB, HSL, HSV, CMYK en LAB — bewerk een veld en de rest verandert direct mee.JSON-formatterFormatteer, valideer en minify JSON in een handomdraai.