CSS Beautifier en formatter online
Formatteer, maak de verkleining ongedaan en organiseer rommelige of gecomprimeerde CSS-stylesheets in realtime. Onze state-machine CSS-formatter springt nauwkeurig geneste @media-query's, @keyframes, CSS-variabelen (- var), https:// URL's en inline SVG-gegevens-URI's - en bevat een CSS Minifier met één klik wanneer u klaar bent om naar productie te verzenden.
Hoe u CSS online kunt verfraaien en deminificeren
- Plak uw CSS: Plak uw gecomprimeerde
.min.cssof rommelige stylesheet in de Voer CSS-editor aan de linkerkant in of klik op Load Sample om geneste te testen@media-query's, variabelen en URL's. - Kies een voorinstelling of pas instellingen aan: Kies 2 Spaties, 4 Spaties, Opschonen en sorteren A–Z, of Minify (.min.css) in de balk Snelle voorinstellingen, of pas aan inspringing, plaatsing van accolades, splitsen van de selector en kleurcompressie aan de rechterkant.
- Inspecteer live statistieken: Bekijk hoe de Invoer, Uitvoer, Regels en Lijnen-tellers onmiddellijk worden bijgewerkt terwijl u typt of tussen opties schakelt.
- Kopiëren of downloaden: Klik op Kopiëren naar clipboard of Download .css om uw opgemaakte stylesheet op te slaan als
styles.beautified.css(ofstyles.min.cssin de verkleinmodus).
CSS Opmaak- en optimalisatieopties uitgelegd
| Optie | Wat het doet | Voor | Na |
|---|---|---|---|
| Verkleinen en inspringen | Breidt regels met één regel en geneste @media / @keyframes-blokken uit met 2, 4 of 8 spaties of tabs. |
@media(max-breedte:768px){.box{breedte:100%}} |
@media (max. breedte: 768px) { |
| Eén selector per lijn | Splitst door komma's gescheiden selectorlijsten op individuele regels, terwijl komma's binnen :is() of :not() worden genegeerd. |
.btn, .card, .modal { ... } |
.btn, |
| Kleurwaarden comprimeren | Converteert rgb() en 6-cijferige hexadecimale codes naar 3-cijferige hexadecimale codes binnen elke declaratiewaarde, terwijl de omliggende tokens behouden blijven. |
rand: 1px effen RGB(255, 0, 0); |
rand: 1px effen #f00; |
| Sorteereigenschappen (A–Z) | Alfabetiseert declaraties binnen elk blok om codebeoordelingen te standaardiseren en dubbele eigenschappen te onthullen. | z-index: 5; weergave: flex; uitlijnitems: midden; |
align-items: midden; |
Waarom een State Machine CSS Beautifier gebruiken?
Veel eenvoudige online CSS-formatters splitsen code op elke dubbele punt (:), puntkomma (;) of accolade (}). Die aanpak mislukt zodra uw stylesheet moderne CSS-functies bevat, zoals:
- Geneste at-regels en native CSS Nesting:
@media-query's,@supportsfunctiequery's,@keyframes-animaties,@layer-blokken en geneste onderliggende selectors vereist het bijhouden van inspringingen op meerdere niveaus. - Externe URL's en inline SVG-gegevens-URI's: Eigenschappen zoals
background: url("https://...")ofurl("data:image/svg+xml;utf8,bevatten dubbele punten en puntkomma's die nooit mogen worden gesplitst als CSS-eigenschap scheidingstekens.") - Pseudo-Element Inhoudsreeksen: Declaraties zoals
content: "Item: 1; Status: OK"houden hun exacte innerlijke karakters en witruimte intact. - W3C-nauwkeurige kleurverkorting: Benoemde kleuren worden alleen ingekort als het hex-equivalent strikt korter en identiek is in de CSS-specificatie (bijvoorbeeld
wit→#fffenzwart→#000, terwijlgreenbehouden blijft alsgreen, aangezien#008000langer is en#0f0feitelijklime).
Veelgestelde vragen
Hoe kan ik het verkleinen van een .min.css-bestand online ongedaan maken?
Plak uw gecomprimeerde .min.css-code in het vak Input CSS aan de linkerkant. De tool ontleedt selectors, declaraties, @media-query's en @keyframes automatisch in realtime in netjes ingesprongen CSS met meerdere regels.
Ondersteunt deze CSS beautifier @media-query's, @keyframes en data: URI's?
Ja. In tegenstelling tot eenvoudige, op splitsen gebaseerde formatters, maakt deze tool gebruik van een state-machine CSS-parser die geneste blokken behoudt (@media, @supports, @keyframes, @layer en native CSS-nesten) evenals dubbele punten en puntkomma's binnen url("https://..."), data:image/svg+xml URI's, en geciteerde content-tekenreeksen.
Is het veilig om CSS-eigenschappen alfabetisch te sorteren?
Alfabetisch sorteren maakt het gemakkelijker om grote regels te scannen en helpt dubbele aangiften op te sporen. Als een regel echter afhankelijk is van een afgekorte eigenschap gevolgd door een specifiekere overschrijving (of omgekeerd, zoals background-color versus background), kan het wijzigen van de declaratievolgorde veranderen welke eigenschap wint. Schakel sorteren in als uw regels niet afhankelijk zijn van de steno-overschrijvingsvolgorde.
Kan ik CSS ook verkleinen met deze tool?
Ja. Klik op de knop Minify CSS (of selecteer Minify (Single-Line .min.css) in het instellingenpaneel) om opmerkingen, witruimte en volgpuntkomma's te verwijderen en kleurwaarden te comprimeren in een compact productiestylesheet.
Wordt mijn CSS-code naar een server geüpload?
Nee. Alle formattering en minificatie van de CSS wordt 100% lokaal in uw browser uitgevoerd met behulp van JavaScript. Uw stylesheets verlaten nooit uw computer.