TanodTools
IT

Minifica e indenta CSS

Incolla un foglio di stile per ridurlo in produzione o per impaginarlo in modo leggibile, e vedi quanti byte risparmi.

Funziona interamente nel tuo browser

Modalità
Commenti

Input fino a circa 10 MB. Rimuove solo spazi e commenti; non unisce regole, non riscrive valori e non rimuove CSS inutilizzato.

Come minificare o indentare il CSS

  1. Incolla il CSS nella casella, oppure premi Inserisci un esempio.
  2. Scegli Minifica per comprimerlo, oppure Indenta per impaginarlo con il tuo rientro. Seleziona o deseleziona l'opzione dei commenti di licenza quando minifichi.
  3. Controlla lo spazio risparmiato, poi copia il risultato o scaricalo come file .css.

Minificare il CSS senza romperlo

Minificare un foglio di stile significa rimuovere tutto ciò che il browser ignora: commenti, rientri, a capo e gli spazi attorno alla punteggiatura. I file più piccoli si scaricano e si analizzano più in fretta, e per un foglio di stile grande il risparmio è spesso da un quarto alla metà delle dimensioni prima della compressione. Le regole e il loro ordine restano esattamente come scritti.

La parte delicata è sapere quali spazi il browser ignora. Uno spazio tra due selettori, come in nav a, è un combinatore che significa "qualsiasi discendente", quindi nav a e nava sono cose diverse. Dentro calc(1rem + 2px) gli spazi attorno a + sono obbligatori, e calc(1rem+2px) non è valido. Il testo tra virgolette e dentro url() è dato, non sintassi. Un minificatore costruito con espressioni regolari spesso sbaglia uno di questi casi; questo legge il foglio di stile come una sequenza di token e rimuove gli spazi solo dove la grammatica li rende facoltativi.

Indentare è la direzione opposta: una dichiarazione per riga, con rientro dentro le parentesi graffe, così un file minificato da una CDN diventa qualcosa che puoi leggere e confrontare.

Suggerimenti

Domande frequenti

Il mio CSS viene caricato?

No. La minificazione avviene nel tuo browser, e la libreria di indentazione viene caricata da questo sito solo se scegli Indenta. Il tuo foglio di stile non viene mai inviato altrove.

Cosa cambia esattamente Minifica?

Rimuove i commenti e gli spazi attorno a parentesi graffe, punti e virgola, virgole e combinatori (>, ~, +), ed elimina l'ultimo punto e virgola di ogni blocco. Mantiene lo spazio in a b (il combinatore dei discendenti), in and (min-width: ...) e attorno a + e - dentro calc(), clamp(), min() e max(), dove toglierlo romperebbe il valore.

Tocca stringhe e url()?

No. Tutto ciò che sta tra virgolette, incluso il testo che sembra un commento o una parentesi graffa, e il contenuto di url() vengono copiati carattere per carattere.

Accorcia colori o numeri?

No. Valori come #336699, 0.5em e 0px restano come scritti. Quelle riscritture fanno risparmiare poco e comportano qualche rischio, quindi se ne vanno solo spazi e commenti.

Come faccio a sapere che il CSS minificato è sicuro?

Dopo ogni esecuzione la pagina analizza l'originale e il risultato con il parser CSS del browser e confronta ciò che legge. Se differiscono, sopra il risultato compare un avviso. Una corrispondenza significa che il browser vede le stesse regole.

Cosa sono i commenti di licenza?

I commenti che iniziano con /*! sono tradizionalmente mantenuti dai minificatori perché contengono testo di copyright o di licenza che una licenza può obbligarti a conservare. Disattiva l'opzione per rimuovere anche quelli.