Vai al contenuto principale
LibraTool logoLibraTool

Abbellitore CSS gratis

Formatta il CSS minificato con un’indentazione coerente, oppure minificalo. Ordinamento alfabetico delle proprietà facoltativo per diff prevedibili.

Funziona offline una volta caricato

Trascina qui un file o fai clic per sfogliare

CSS · elaborato sul tuo dispositivo

oppure premi Ctrl+V per incollare dagli appunti

Sfoglia file
CSS formattato
L'output apparirà qui…

Usi comuni

  • Esegui il Debug del CSS di ProduzioneVisualizza il CSS minificato dai siti di produzione in un formato leggibile per trovare e fare reverse engineering dello styling.
  • Applica lo Stile CSS del TeamEsegui il CSS inviato dal team attraverso un beautifier coerente in modo che i diff riguardino il contenuto, non la formattazione.
  • Formatta CSS con Prefissi VendorIl CSS con prefisso vendor (output di autoprefixer) ha spesso molte varianti -webkit-, -moz-, -ms-. Formatta per ispezionare.
  • Impara dal CSS ProStudia il CSS dai famosi design system formattando il loro output compilato.
  • Formatta CSS per Segnalazioni di BugQuando archivi bug CSS, il CSS formattato è molto più facile per i revisori da leggere e comprendere.

Come funziona

Questo strumento formatta il CSS usando un parser ricorsivo scritto a mano integrato direttamente nella pagina — nessuna libreria di terze parti, nessuna chiamata al server. Il parser attraversa il tuo CSS carattere per carattere, gestendo correttamente stringhe tra virgolette, valori url(), at-rule annidate, e commenti che confonderebbero approcci più semplici basati su regex.

  1. 1
    Tokenizzazione a livello di carattere
    La funzione walkCss scansiona l'input grezzo un carattere alla volta, tracciando lo stato delle virgolette e la profondità delle parentesi così i punti e virgola o le graffe dentro url(), valori stringa, o commenti non vengono mai scambiati per delimitatori strutturali.
  2. 2
    Separazione tra blocchi e dichiarazioni
    Quando lo scanner trova una graffa di apertura di primo livello, estrae il preludio (il selettore o la parola chiave at-rule) ed elabora ricorsivamente il corpo del blocco — che a sua volta può contenere regole annidate (@media, @supports, nesting CSS nativo) gestite a una profondità di ricorsione più profonda.
  3. 3
    Ordinamento delle proprietà e indentazione
    Le dichiarazioni all'interno di ogni blocco vengono raccolte in una sequenza, poi opzionalmente ordinate alfabeticamente per nome di proprietà prima di essere scritte con la larghezza di indentazione scelta (2 o 4 spazi). La modalità minify salta completamente gli spazi bianchi e rimuove i commenti.
  4. 4
    Output istantaneo nel browser
    I risultati appaiono mentre digiti tramite un hook useMemo — nulla viene inviato da nessuna parte. Il CSS formattato o minificato può essere copiato negli appunti o scaricato come file .css, e il pannello mostra la differenza di dimensione rispetto all'originale.

Strumenti correlati

🌐

Abbellitore e Minificatore HTML

Formatta o minifica HTML con corretta indentazione delle sezioni. Preserva il contenuto all'interno dei blocchi <pre>, <script>, <style>.

Prova
🗄️

Formattatore e Abbellitore SQL

Formatta query SQL con indentazione corretta, maiuscole delle parole chiave configurabili e interruzioni di riga sulle clausole principali. Funziona con qualsiasi dialetto SQL.

Prova
🗜️

Minificatore e Abbellitore CSS

Minifica il CSS per ridurre le dimensioni del file o abbellisci il CSS minificato per la leggibilità. Istantaneo, nel tuo browser.

Prova

Domande frequenti