Formattatore e minificatore CSS
CSS Beautifier & Minifier
Formatta o minifica il CSS senza riordinare niente, conservando esattamente il flusso dei token.
Abbellisce un foglio di stile perché lo si possa leggere, oppure lo riduce all’osso quando lo si vuole più piccolo. Entrambe le direzioni vengono controllate sul flusso di token a ogni esecuzione, quindi l’uscita è il proprio foglio di stile con spazi bianchi diversi e nient’altro: nessuna fusione di abbreviazioni, nessun accorciamento dei colori, nessun riordino delle regole.
CSS in ingresso
Trascina un file .css
Letto in questa scheda. Non viene caricato niente.
Formattato
Regole
5
Selettori
9
Dichiarazioni
9
Regole at
1
Proprietà personalizzate
2
Come si usa
Incollare il CSS o trascinare un file
Le at-rule annidate, le proprietà personalizzate, `:is()` e i selettori moderni si analizzano tutti. La barra delle statistiche sotto i pannelli conta regole, selettori, dichiarazioni e proprietà personalizzate man mano.
Abbellire con il layout che si usa
Larghezza dell’indentazione, un selettore per riga o più di uno, una riga vuota fra le regole, commenti conservati o tolti. Sono le quattro cose su cui i fogli di stile non vanno davvero d’accordo.
Oppure minificare, tenendo l’intestazione di licenza
La convenzione `/*!` segna un commento che deve sopravvivere alla minificazione. L’interruttore la rispetta, e le cifre prima/dopo/risparmiato dicono se ne valesse la pena.
Domande frequenti
Perché non accorcia `#ffffff` in `#fff`?
Perché ogni riscrittura «sicura» ha un foglio di stile in cui non lo è. Accorciare i colori, fondere le abbreviazioni, riordinare le dichiarazioni e togliere le regole «ridondanti» cambiano il comportamento da qualche parte, e un minificatore che rompe una pagina in silenzio è peggio di uno che risparmia meno byte. Il gzip recupera comunque quasi tutta la differenza.
Che cosa sono i «problemi lessicali» che segnala?
Punti in cui il tokenizzatore non è riuscito a dare un senso a quello che leggeva: un commento non chiuso, una stringa che arriva fino alla fine del file, una graffa vagante. Vengono segnalati con un offset in byte e il formattatore tira dritto, perché un foglio di stile con una regola rotta vale comunque la pena di leggerlo.
Aggiunge i prefissi dei fornitori?
No. I prefissi hanno bisogno di un obiettivo di supporto dei browser e di un database di che cosa richiede ogni proprietà, e cambiano entrambi ogni mese. È il compito di Autoprefixer, e per farlo onestamente serve un passo di build.
Sopravvive a un URL che contiene un punto e virgola?
Sì: `url(dots;grid.png)` e una stringa `content: "{ not a block; }"` vengono tokenizzati entrambi come valori singoli invece di essere spezzati sulla punteggiatura che contengono. Quel caso è nell’esempio della pagina proprio perché i formattatori ingenui lo sbagliano.
Può ricevere da
Impacchettare uno sprite sheet
Sprite Sheet Packer
Impacchetta molte immagini in un unico atlante e produce accanto la mappa dei fotogrammi in CSS o in JSON.
Formattatore e minificatore HTML
HTML Beautifier & Minifier
Formatta o minifica l’HTML, conservando gli elementi in linea e riducendo gli spazi bianchi se glielo chiedi.
Formattatore e minificatore JavaScript
JavaScript Beautifier & Minifier
Toglie commenti e spazi da JavaScript o TypeScript senza rinominare niente, e re-indenta un bundle minificato perché torni leggibile.
Generatore di gradienti CSS
CSS Gradient Builder
Costruisce gradienti lineari, radiali e conici trascinando i punti di arresto ed esporta il CSS in sRGB o in OKLCH.
Dopo
Questi accettano ciò che produce questo strumento, così il risultato può passare direttamente.
Estrattore di token CSS
CSS Token Extractor
Tira fuori da un foglio di stile colori, spaziature, raggi e caratteri e propone un insieme di proprietà personalizzate.
Formattatore e minificatore HTML
HTML Beautifier & Minifier
Formatta o minifica l’HTML, conservando gli elementi in linea e riducendo gli spazi bianchi se glielo chiedi.
Formattatore e minificatore JavaScript
JavaScript Beautifier & Minifier
Toglie commenti e spazi da JavaScript o TypeScript senza rinominare niente, e re-indenta un bundle minificato perché torni leggibile.
Da SVG a data URI per CSS
SVG to CSS Data URI
Codifica un SVG come data URI da usare come sfondo CSS, applicando l’escape solo dove serve per tenerlo corto.
Codificatore e decodificatore Base64
Base64 Encoder & Decoder
Codifica e decodifica in Base64 e Base64URL testo o file, trattando correttamente l’UTF-8.
Da curl a codice
curl to Code
Converte un comando curl in fetch, axios, requests di Python, Go, PHP o PowerShell.