Minifica il CSS eliminando commenti e spazi superflui e unendo le regole duplicate, oppure fa l'inverso riformattandolo con una dichiarazione per riga. Entrambe le direzioni usano parser veri (csso e js-beautify), così il testo che sembra un commento dentro una stringa content:, gli spazi in calc() e gli URI data: restano intatti.
Qual è la differenza tra minificazione e abbellimento?
Minifica rimuove i commenti e gli spazi bianchi superflui e unisce in modo sicuro le regole duplicate per produrre il CSS più piccolo possibile — utile per ridurre un foglio di stile prima di pubblicarlo. Abbellisci fa l'opposto: reindenta tutto con una dichiarazione per riga, così un file minificato o disordinato torna leggibile. Entrambe le operazioni sono basate su veri parser CSS (csso e js-beautify), quindi contenuti delicati come testo simile a un commento all'interno di una stringa content:, gli spazi in calc() e gli URI data: vengono preservati invece di essere rotti da una banale sostituzione di testo.
Come usare il Minificatore CSS
- Incolla — incolla il CSS da minificare o abbellire nella casella di input in alto.
- Scegli il rientro — scegli tra 2 spazi, 4 spazi o tab (si applica solo al risultato dell'abbellimento, non influisce sulla minificazione).
- Esegui — premi il pulsante "Minifica" o "Abbellisci" e l'operazione avviene immediatamente nel browser.
- Copia — controlla l'indicatore della dimensione ridotta e usa il pulsante "Copia" per mettere il risultato negli appunti.
La minificazione rischia di alterare gli stili?
No. Questo strumento non fa una banale sostituzione di testo: usa un vero parser CSS (csso) che comprende il foglio di stile come un albero sintattico e poi lo ottimizza in modo sicuro. Per questo le stringhe simili a commenti dentro content:, gli spazi significativi dentro calc(), gli URI data: e i prefissi vendor vengono preservati, e il risultato di rendering non cambia.
Di quanto si riduce la dimensione?
Dipende dallo stato dell'originale, ma un CSS leggibile ricco di commenti e rientri di solito si riduce del 30–60% circa, mentre un file già minificato si riduce di poco. Al termine della conversione, l'indicatore della dimensione mostra subito quanti byte e quale percentuale sono stati risparmiati rispetto all'originale. Aggiungendo la compressione gzip o brotli durante il trasferimento al server, i byte effettivamente trasmessi si riducono ulteriormente.
Quando si usa l'abbellimento (beautify)?
L'abbellimento è utile quando devi leggere o modificare un CSS già compresso in una sola riga o un file con rientri disordinati. Ridistribuisce ogni dichiarazione su una riga con un rientro coerente, il che è comodo per fare il debug di un foglio di stile pubblicato o per capire il codice di altri. Quando devi pubblicarlo di nuovo, basta riportarlo a "Minifica".
Il mio CSS viene caricato da qualche parte?
No. Sia il minificatore che l'abbellitore vengono eseguiti interamente nel tuo browser tramite librerie ospitate localmente — il tuo CSS non viene mai inviato né memorizzato su alcun server. Dopo la conversione, l'indicatore delle dimensioni mostra quanti byte ha risparmiato la minificazione, e il pulsante Copia mette il risultato direttamente nei tuoi appunti.