CSS Formatter & Beautifier
Gebruikshandleiding
CSS Formatter maakt CSS-code mooi op of minimaliseert deze — inclusief standaard CSS-bestanden, preprocessor-uitvoer en inline stijlblokken — direct in de browser. Automatisch gegenereerde, door buildtools gecomprimeerde CSS is vaak onleesbaar: regels op één regel, aaneengesloten selectors en verkorte waarden maken debuggen en reviewen moeilijk. Deze tool breidt geminimaliseerde CSS uit in een leesbaar formaat met elke declaratie op een aparte regel, geneste inspringing (voor @media-queries en @keyframes) en consistente spatiëring tussen selector, accolade en declaraties. De opmaakengine gebruikt js-beautify, specifiek geconfigureerd voor CSS, met opties voor het aantal inspringspaties, de positie van de openingsaccolade en de verwerking van meerdere selectors. Minimalisatie doet het omgekeerde: verwijdert alle overbodige witruimte en comprimeert CSS naar het meest compacte formaat — handig voor het controleren van bundelgrootte of het optimaliseren van voor het laden kritieke bestanden. Beide modi werken lokaal, zonder internetverbinding na het eerste laden.
- Plak uw CSS — Klik op het invoerpaneel en plak uw onbewerkte of geminimaliseerde CSS-code. Standaard CSS, Less, gecompileerde Sass en inline stijlblokken worden ondersteund.
- Selecteer de modus — Kies "Mooi maken" voor leesbare, ingesprongen uitvoer, of "Minimaliseren" voor compacte CSS voor gebruik in productie.
- Configureer inspringing — Kies de inspringgrootte (2 of 4 spaties). Een consistente grootte maakt code-reviews gemakkelijker bij teamwerk.
- Inspecteer de uitvoer — Lees de opgemaakte CSS in het rechterdeelvenster. Controleer of declaraties zijn uitgelijnd, of @media-queries correct zijn ingesprongen en of meerdere selectors op aparte regels staan.
- Kopieer het resultaat — Klik op "Kopiëren" om de verwerkte CSS naar het klembord te kopiëren. Plak het in uw code-editor, ontwerpsysteem of codebase.
- Vergelijk voor en na — Gebruik de naast elkaar geplaatste invoer- en uitvoerpanelen om visueel te verifiëren dat de opmaak de semantische inhoud van de CSS niet heeft gewijzigd — alleen de spatiëring en uitlijning.
Veelgestelde vragen
Wordt mijn CSS naar een server gestuurd?
Nee. Alle CSS-opmaak en -minificatie vindt plaats in je browser via native JavaScript. Je code blijft op je apparaat.
Kan ik deze tool offline gebruiken?
2Kit is een PWA. Na je eerste bezoek wordt de tool gecacht en werkt volledig offline.
Wat is het verschil tussen CSS beautify en minify?
Beautify formatteert CSS met goede inspringing en regeleinden om het leesbaar te maken. Minify verwijdert alle onnodige witruimte en opmerkingen om de bestandsgrootte voor productie te verkleinen.
Ondersteunt deze tool moderne CSS zoals variabelen en nesting?
Ja. De formatter gebruikt js-beautify om standaard CSS te verwerken inclusief aangepaste CSS-variabelen (--custom-properties) en de meeste moderne CSS-syntaxis.
Is deze CSS-formatter gratis?
Ja. 2Kit is volledig gratis, vereist geen account en heeft geen gebruikslimieten.
Technische implementatie
Alle verwerking vindt volledig in uw browser plaats — er worden nooit gegevens naar servers verzonden. Dit hulpmiddel werkt volledig offline als Progressive Web App (PWA): na het eerste bezoek worden alle pagina's en bestanden opgeslagen door de Service Worker en blijven beschikbaar zonder internetverbinding. Uw invoergegevens verlaten uw apparaat nooit, waardoor het veilig is voor gevoelige inhoud zoals API-sleutels, wachtwoorden, privéconfiguraties en vertrouwelijke documenten.