Il blog di Francesco D'Aguanno

Code Beautifier css ottimizzati online

Pubblicato da Franklyn il giorno 26/09/2007.

A partire da oggi, ogni mercoledì, pubblicherò un post in cui recensirò servizi, applicazioni, strumenti, etc. online che abbiano a che fare con la grafica ed il web design.

Cominciamo oggi con un sito per la formattazione e la pulizia dei fogli di stile.

Il sito in questione è Code Beautifier.

Il sito molto semplice, è tradotto in francese, inglese, tedesco e portoghese ed è composto da una sola pagina. La cosa non può che far piacere: il sito serve ad ottimizzare i CSS ? Ebbene, questo è quello che fa, nulla di più, nulla di meno.

Il parse dei fogli di stile è effettuabile in due modi:

1. inserendo il codice CSS direttamente nella textarea a sinistra
2. indicando l'url in cui risiede il foglio di stile

A questo punto, nella sezione Code Layout è necessario scegliere il tipo di compressione del codice; le possibilità vanno da low ad highest oltre alla compressione personalizzata tramite custom template. Per la realizzazione di template CSS, il sito rimanda a CSSTidy

Ora, nella sezione Options è possibile procedere alle molte ottimizzazioni presenti.

La prima opzione che ci si trova a dover scegliere è Preserve CSS, ma la descriverò più avanti in quanto la sua selezione coinvolge molte delle altre ottimizzazioni.

Le opzioni Sort Selectors e Sort Properties, ordinano alfabeticamente rispettivamente i selettori e le proprietà; riguardo all'ordinamento dei selettori, Code Beautifier consiglia di prestare attenzione.

Passiamo ora all'opzione Regroup selectors; questa opzione permette due tipi di ottimizzazione:

• raggruppare (in linea separati dalla virgola) i selettori che presentino le stesse proprietà
• dividere i selettori con le stesse proprietà nel caso siano stati inseriti separati da virgola ( h1, h2, h3 {...} )

L'opzione Optimise shorthands, serve proprio ad ottimizzare gli shorthands. Ma cosa sono gli shorthands ? Come dice il nome sono scorciatoie. In questo caso un'esempio vale più di mille parole, uno degli usi più frequenti di shorthands è nella proprietà border:

Per gestire la proprietà border, è necessario utilizzare le seguenti tre proprietà:

• border-width: unità | medium | thick | etc.
• border-style: dashed | dotted | double | etc.
• border-color: nome del colore | #hex

Utilizzando gli shorthands, la proprietà border diventa:

• border: border-style border-width border-color

A questo punto è chiaro il lavoro fatto dall'opzione Optimise shorthands, ma a me non è chiaro come lo faccia per il semplice fatto che l'ottimizzazione è suddivisa in Safe Optimisation e All Optimisation: cosa intende per ottimizzazione sicura e in base a quali parametri ?

Le altre ottimizzazione non credo abbiano bisogno di commenti:

• Compress colors
• Compress font-weight
• Lowercase selectors
• Case for properties
  • Lowercase
  • Uppercase
• Remove unnecessary backslashes
• Remove last ;
• Discard invalid properties
  • CSS 1.0
  • CSS 2.0
  • CSS 2.1
• Add timestamp
• Output as file

Ora posso descrivere l'opzione Preserve CSS; tale opzione inibisce lo svolgimento le seguenti attivià di ottimizzazione del codice:

• Sort Selectors
• Sort Properties
• Regroup selectors
• Optimise selectors

Cliccando su PROCESS CSS viene avviata l'attività di ottimizzazione.

Questo è il primo applicativo di ottimizzazione CSS recensito, ma in una ipotetica classifica sarebbe di sicuro nella top ten; ecco i punti a favore:

• la grafica è pulita
• è facile da usare
• il risultato dell'ottimizzazione è buono
• la fruibilità del risultato è ottima (in linea o download)

Unico punto a sfavore:

• assenza della traduzione italiana (non che fosse così necessaria, però...)

Post scritto da Franklyn