CSS intelligenti

I fogli di stile, o Cascade Style Sheets (aka CSS), sono alla base delle grafiche web, permettendo in definitiva di definire le caratteristiche di visualizzazione dei tag html.

Chi si trova spesso a scriverne avrà, probabilmente, sentito più volte il desiderio di alcune caratteristiche aggiuntive che forse, in futuro, saranno implementate nel linguaggio stesso.

Per ora entrano in gioco i pre-compilatori: dei programmi che trasformano il css "esteso" in css normale, permettendoci di lavorare sul primo e di visualizzare sul sito il secondo.

In giro se ne trovano davvero molti, ma focalizzerò l'articolo su Dtcss (libreria php) e LESS (compilatore ruby). Per fare altri nomi abbiamo CleverCSS (python), CSS Cacheer, HSS, Sass (potete vedere una demo qui).

LESS

Less è un progetto open source basato su linguaggio Ruby che pre-processa i file in un formato particolare .less (che altro non è che un css esteso) trasformandoli in file .css.

Less punta su 4 caratteristiche:

Variabili

Esiste la possibilità di definire delle variabili da utilizzare poi nel resto del file.

Mixins

Una sorta di ereditarietà che permette di riutilizzare classi incorporandole all'interno di altre.

Nested Rules

Invece di creare lunghi nomi, si possono nidificare gli elementi.

Operations

Si possono effettuare operazioni, creando complesse relazioni tra elementi.

Il programma è disponibile in codice sorgente. Si può installare anche su windows seguendo questi semplici passi:

1. installare l'ultima release di RubyForge disponibile qui;
2. aprire il prompt del dos (start->esegui->'cmd.exe') e digitare "gem install less";
3. a questo punto per compilare un file less ci basterà digitare "lessc file.less" per vederlo trasformato in file.css.

Trovate la documentazione sul programma a questo indirizzo:

http://lesscss.org/docs.html

Dtcss

Dtcss si presenta estremamente simile a LESS.

La sua particolarità è che il css avanzato, anziché essere pre processato da noi (in realtà esiste un plugin apposta per Less over Ruby on Rails), viene gestito interamente da php. In questo modo chiunque, senza avere installato alcun programma in particolare, può lavorare sul file e vedere poi il css compilato correttamente sul webserver.

La guida di installazione (http://code.google.com/p/dtcss/wiki/QuickInstallation) propone l'utilizzo di mod_rewrite o simili per far andare il sistema. In realtà lo si può benissimo modificare adattandolo alle nostre esigenze.

Come Less, Dtcss gestisce l'annidamento, l'aritmetica (più avanzata, riguardando anche funzioni e espressioni), le variabili. A questo si aggiungono altre caratteristiche interessanti: l'inclusione di css, if/then/else, commenti a linea singola e altro ancora (panoramica completa qui http://code.google.com/p/dtcss/wiki/SyntaxGuide).

Chi si dovesse preoccupare per il peso lato server della continua compilazione dei file, scoprirà con piacere che Dtcss prevede un sistema di caching semplice ma efficace (inoltre la semplicità con cui viene presentato lascia libertà di definire un sistema più adatto alle proprie esigenze).

Insomma, un ottimo progetto facile da utilizzare e mantenere.

Link per il download: http://code.google.com/p/dtcss/downloads/list

Questo articolo è stato pubblicato il 31-12-1969 alle 18:33 e classificato in .