11 strumenti utili per controllare, pulire e ottimizzare il file CSS

Ridurre al minimo la dimensione del foglio di stile CSS è stato considerato da molti un buon modo per aumentare la velocità di caricamento del sito. In effetti, riducendo il file CSS di diversi kilobyte, il server impiegherà un tempo più breve per caricare e generare una pagina Web più veloce.

Nel caso in cui i tuoi articoli colpiscano la pagina iniziale di Digg, questo potrebbe anche essere uno dei pochi fattori decisivi (ce ne sono molti altri) se il tuo server si bloccherà o no.

Alcuni dei metodi più comuni utilizzati per minimizzare / ottimizzare un foglio di stile CSS comportano l'eliminazione di selettori inutilizzati, spazi bianchi indesiderati, tabulazioni, commenti e modifica della dichiarazione di longhand alle notazioni di stenografia.

So che alcuni di voi qui non sono abbastanza esperti di tecnologia per modificare il proprio codice CSS, quindi qui vi fornirò alcuni degli strumenti utili che è possibile utilizzare per ottimizzare il codice CSS, anche se non si ha alcuna conoscenza di Codifica CSS.

Controlla il tuo codice CSS

W3C CSS Validator

Il validatore CSS W3C è uno strumento che puoi utilizzare per convalidare il tuo CSS. Puoi scaricare il validatore Java sul tuo computer e utilizzarlo offline oppure utilizzare il modulo online per verificare il codice CSS.

CSS Validator Firefox Add-On

Per rendere più semplice la convalida del codice CSS, c'è questa estensione per Firefox - Validatore CSS - che puoi installare sul tuo browser. Una volta installato, puoi controllare facilmente e velocemente il tuo codice con un clic del tasto destro del mouse.

CSSCheck

Anche se il tuo codice CSS è convalidato, ciò non significa che sia privo di errori. La validazione significa solo che è conforme agli standard CSS impostati dal W3C. Se vuoi convalidare oltre a esaminare alcuni problemi di compatibilità del browser con il tuo foglio di stile, CSSCheck è un ottimo strumento per te.

Analizzatore CSS

CSS Analyzer è uno strumento utile che consente di convalidare il foglio di stile in base allo standard del W3C, eseguire un test di contrasto del colore e un test per garantire che le dimensioni pertinenti siano specificate in unità di misura relative.

Nel caso ti stia chiedendo, il test del contrasto del colore è quello di verificare che le combinazioni di colori di primo piano e di sfondo forniscano un contrasto sufficiente quando vengono visualizzate da qualcuno con deficit di colore o se visualizzate su uno schermo in bianco e nero.

Ripulisci il tuo codice CSS

Selettori Dust-Me

Dust-Me Selectors è un'estensione per Firefox che trova selettori CSS inutilizzati nella pagina che stai visualizzando. Mentre testate le pagine successive dello stesso dominio, il risultato viene confrontato con i dati precedenti e tutti i selettori incontrati vengono cancellati dall'elenco. Puoi usarlo per testare singole pagine o per spiderare l'intero sito.

Alla fine, otterrete un rapporto sui selettori che non vengono utilizzati da nessuna parte nel sito. È quindi possibile rimuovere tali selettori dal foglio di stile (codice minore significa file di dimensioni inferiori).

Checker di ridondanza CSS

Simile a Dust-Me Selectors, questo strumento controlla il tuo sito per selettori CSS inutilizzati e ridondanti. L'unica cosa che è diversa è che devi inserire manualmente l'URI per ogni pagina che vuoi testare.

Ottimizza e comprimi il tuo codice CSS

Una volta che hai completato il controllo della validità del tuo CSS e ripulisci il codice non necessario, è il momento di ottimizzare il file CSS e ridurlo alla dimensione più piccola possibile.

CSS Tidy

CSS Tidy è un software open source che puoi utilizzare per ottimizzare e comprimere il tuo file CSS. È disponibile in formato .exe (solo Windows) e in formato script php compresso (tutte le piattaforme, per gli sviluppatori Web). Quello che fa CSS Tidy è principalmente rimuovere il commento, spazi bianchi non necessari e modificare parte del codice in stenografia. Durante la compressione, puoi scegliere tra leggibilità del codice o compressione massima. A seconda della lunghezza del codice, è possibile ottenere facilmente un rapporto di compressione fino al 30% o più.

Dato che CSS Tidy è un progetto open source, ci sono stati diversi siti Web che utilizzano il codice e lo hanno trasformato in uno strumento online che le persone possono utilizzare. Qui ce ne sono un po:

• PULIZIA CSS
• Codice Beautifier
• CSS Formatter and Optimizer dal portale CSS

Altri ottimizzatori CSS

FlumpCakes CSS Optimizer

Un semplice ottimizzatore che offre diverse opzioni tra cui scegliere.

Robson CSS Compressor

Anche se potrebbe sembrare lo stesso di altri, ho trovato che il tasso di compressione per Robson CSS Compressor è il più alto tra tutti. Sebbene fornisca diverse opzioni per modificare l'impostazione, lasciando intatte tutte le opzioni (tutte le opzioni selezionate) produce sempre il risultato migliore.

Compressore CSS Drive CSS

Il compressore CSS offerto da CSS Drive è disponibile in due modalità che puoi utilizzare: normale e avanzato. Nella modalità normale, è sufficiente selezionare il livello di compressione desiderato (leggero, normale o super compatto) e il compressore CSS farà il resto. Nella modalità avanzata, ti vengono fornite più opzioni e una maggiore opinione su come si desidera ottimizzare il foglio di stile.

CSS Optimizer

L'ottimizzatore CSS di mabblog.com è un'applicazione a riga di comando per Mac e Linux. È pensato per coloro che sono più a loro agio con il terminale piuttosto che con un'interfaccia online. C'è anche una semplice versione online disponibile per coloro che vogliono farla finita rapidamente e finita.

Speriamo che gli strumenti qui elencati siano sufficienti per ottimizzare e ottimizzare il foglio di stile CSS. Se hai utilizzato altri strumenti che sono più utili di quelli sopra menzionati, condividili con noi nei commenti.

Scopri di più su: Web design, sviluppo Web, Strumenti per i Webmaster.