Esaminare CSS compresso
Espandi un estratto per distinguere selettori, proprietà e valori prima di modificare una dichiarazione. Conserva le sorgenti del progetto per recuperare file e commenti originali.
Formattatore e minificatore CSS
Reindenta un foglio di stile CSS per facilitarne la lettura oppure minificalo per ottenere un codice più compatto direttamente nel browser.
- Appunti
- Esporta
Dati non inviati
Impossibile elaborare questo input. Controlla la sintassi e i limiti indicati di seguito.
CSS elaborato
Questo strumento ti è stato utile?
Come funziona questo strumento?
Rendi un foglio CSS più leggibile oppure produci una versione compatta di un estratto. Entrambe le azioni analizzano la sintassi invece di cancellare indiscriminatamente spazi e commenti. Una stringa con punti e virgola, un URL o un’espressione calc() devono rimanere valori CSS coerenti. Il risultato è mostrato come testo: le regole non vengono applicate a questa pagina e le risorse citate da url() o @import non sono scaricate per l’elaborazione.
La formattazione usa una presentazione CSS strutturata con rientri di due spazi. Blocchi, elenchi di dichiarazioni e regole annidate riconosciute sono riscritti per facilitarne la lettura. Classi, identificatori e proprietà personalizzate non vengono rinominati per accorciare il documento.
La modalità compatta genera l’output dall’albero sintattico CSS. Elimina separatori inutili e conserva quelli richiesti dalla grammatica, inclusi gli spazi intorno agli operatori in calc(). Una stringa non viene divisa in dichiarazioni solo perché contiene : o ; tra virgolette.
La versione compatta rimuove i commenti ordinari. I commenti che iniziano con ! o contengono @license o @preserve rimangono e vengono raccolti all’inizio dell’output. Verifica le istruzioni del tuo sistema di compilazione: lo strumento non interpreta ogni convenzione di bundler e preprocessori.
L’analisi sintattica non certifica proprietà o resa grafica. Proprietà sconosciute, valori non supportati e regole inefficaci possono restare sintatticamente leggibili. Il modulo riguarda CSS: non compila Sass/SCSS o Less. Non verifica selettori contro il tuo DOM e non calcola gli stili realmente applicati.
Come usare questo strumento
Fornisci il CSS sorgente
Incolla regole o importa un file .css. Rimuovi i tag <style> dagli estratti HTML: il modulo richiede il foglio, non una pagina intera.
Scegli la presentazione
Formatta per rileggere oppure scegli l’output compatto. In caso di errore controlla stringhe, parentesi, commenti e graffe.
Controlla le dichiarazioni importanti
Verifica URL, espressioni calcolate e commenti conservati prima di copiare o scaricare. Nuovo input nasconde il risultato precedente; il ripristino svuota entrambi i campi.
Casi d’uso
Condividere un esempio di layout
Presenta regole leggibili in una revisione o segnalazione. Il CSS formattato non include gli elementi HTML necessari per riprodurre il comportamento.
Preparare un estratto compatto
Riduci gli spazi di presentazione delle regole stabilizzate. L’operazione non elimina regole inutilizzate e non sostituisce la compressione di rete.
Esempi
Espandere una regola semplice
Il selettore a e il colore conservano il loro ruolo. La formattazione dispone la dichiarazione su una riga dedicata con due spazi di rientro.
Input
a { color: red; }Risultato
a {
color: red;
}
Compattare senza rompere stringhe e calc()
Il testo a; b: { } rimane una sola stringa. La sottrazione in calc(100% - 2px) mantiene i separatori necessari intorno all’operatore.
Input
a { content: "a; b: { }"; width: calc(100% - 2px); }Risultato
a{content:"a; b: { }";width:calc(100% - 2px)}Consigli e buone pratiche
- Controlla poi la resa nell’applicazione. Lo strumento non conosce stili concorrenti, dimensioni della pagina o cascata risultante.
- Gli URL relativi conservano il testo, ma la risorsa dipende dal luogo in cui installerai il foglio CSS.
- Compila SCSS o Less con i tuoi strumenti abituali prima di fornire qui il CSS generato.
- Conserva sorgenti e mappe separatamente. Il modulo produce testo CSS senza ricostruire le source map del progetto.
Fonti e riferimenti
- CSS Syntax Module Level 3 — Editor’s Draft (si apre in una nuova scheda), W3C CSS Working GroupPagina in inglese
Domande frequenti
Perché l’output compatto contiene ancora spazi?
Alcuni spazi separano token richiesti dalla grammatica CSS. Rimuoverli da calc(100% - 2px) può invalidare l’espressione. Compatto non significa eliminare ogni spazio.
Quali commenti sopravvivono alla compattazione?
I commenti marcati con !, @license o @preserve rimangono all’inizio. Gli altri vengono eliminati. Controlla le direttive specifiche della tua catena di compilazione.
Posso formattare direttamente Sass o Less?
Il contratto dello strumento è CSS. Non risolve variabili di preprocessore e non ne esegue le funzioni. Compila la sorgente con il software appropriato prima di preparare CSS compatto.
Un foglio accettato funziona in tutti i browser?
No. La sintassi leggibile non garantisce supporto delle proprietà né effetto in uno specifico DOM. Prova separatamente browser di destinazione e diversi stati dell’interfaccia.
Strumenti correlati
Continua con questi strumenti
Strumenti simili o complementari a questo.
Strumenti simili
Formatta HTML o rimuovi commenti ordinari localmente, conservando spazi del testo e contenuto degli script durante la rimozione.
SviluppoUsa questo strumento
Formatta JavaScript, TypeScript o JSX per facilitarne la lettura senza eseguire codice. Elaborazione locale nel browser.
SviluppoUsa questo strumento
Codifica o decodifica le entità HTML comuni per convertire i caratteri speciali di un testo.
SviluppoUsa questo strumento