DynCSS è una libreria Javascript, sviluppata da Vittorio Zaccaria, che implementa un parser capace di rendere dinamici gli attributi contenuti
all'interno dei fogli di stile. Il paradigma è quello della programmazione orientata agli eventi: ogni qualvolta
una determinata condizione relativa alla nostra pagina web viene verificata, una determinata
proprietà dinamica descritta all'interno del file CSS verrà attivata. Ad esempio, gli eventi trigger potranno essere
lo scrolling, il resizing e molti altri.
Il sito ufficiale del progetto include la documentazione e un ottimo esempio dimostrativo.
Il progetto è disponibile su GitHub, nonché gratuitamente scaricabile.
Installazione e supporto
Per installare DynCSS, dovremo ricorrere all'utilizzo del package manager Bower. Chi non lo conoscesse può fare riferimento alla nostra semplice guida all'installazione.
Una volta installato Bower, digitiamo il comando per finalizzare l'installazione di DynCSS in locale:
bower install dyn-cssUtilizzare DynCSS
DynCSS effettua il parsing dei nostri fogli di stile .css, alla ricerca di attributi nel formato -dyn-(attributo).
Per abilitare il parser, dovremo dichiarare all'interno della nostra pagina HTML, il seguente codice:
<script src='bower_components/dyn-css/dyncss.js' type='text/javascript'>
</script>Nella pratica, sarà possibile rendere dinamica qualunque proprietà CSS, a patto che essa sia gestibile da jQuery.
I tipi built-in di DynCSS consentono di accedere alle
proprietà degli elementi CSS come se stessimo eseguendo
codice Javascript direttamente all'interno del foglio di stile. Ad esempio:
- @win-foo: valuta dinamicamente
window.foo(); - @el-foo: valuta dinamicamente
$(current-selector).css(foo); - @jq-foo: valuta dinamicamente
$(current-selector).foo().
Gli attributi in formato -dyn-(attributo) dovranno essere specificati come nel normale formato
di CSS, avendo cura di racchiuderli tra apici singoli. Ad esempio, se volessimo dichiarare
un elemento di classe "header", avente il margine superiore dinamico, e dipendente dall'altezza
della finestra e dall'altezza dello stesso header, dovremo effettuare la seguente
dichiarazione all'interno del foglio di stile:
.header {
-dyn-margin-top: '(@win-height - @el-height)/2.0';
}Stili dinamici
Una importante caratteristica di DynCSS è la capacità di riscrivere a runtime la classe di un dato selettore.
Per fare ciò bisogna utilizzare l'istruzione -dyn-set-state-(class-name).
Ad esempio, le seguenti righe di codice non faranno altro che
aggiungere la classe "highlight" a tutti i selettori di classe "daevidenziare" che risultano
visibili.
La funzione "isVerticallyVisible" deve essere implementata in Javascript
e deve restituire un valore booleano affinchè il codice sia interpretabile correttamente da dyn-CSS:
.daevidenziare {
-dyn-set-state-highlight: '@isVerticallyVisible("#sezione")';
}API
La potenza di calcolo di DynCSS è fornita dalle API.
Le API forniscono una serie di istruzioni built-in per la creazione
di regole complesse che saranno valutate a runtime dal parser implementato da DynCSS.
Di seguito elencheremo le API offerte da DynCSS maggiormente salienti:
L'istruzione @if(condizione, el1, el2) restituisce "el1" se la "condizione" risulta vera,
altrimenti restituisce "el2".
Per esempio, per rimuovere dalla visualizzazione un elemento, quando la proprietà scroll-top della finestra è
maggiore della proprietà bottom dell'elemento stesso, potremo utilizzare il seguente codice:
.elemento-da-nascondere {
-dyn-display: '@if(@win-scrollTop > @jq-offset.bottom, "none", "block")';
}L'istruzione @selectFrom(array) ritorna un singolo elemento dell'array
corrispondente al "breakpoint" correntemente attivo.
Supponendo di volere cambiare dinamicamente la grandezza del testo
del nostro header e di volerla scegliere tra 3em, 4em o 5em, basandoci sulla grandezza della finestra, potremmo procedere così:
.header{
-dyn-font-size: '@selectFrom(["3em", "4em", "5em"])';
}Per dichiarare un breakpoint dovremo ricorrere all'utilizzo del tag script, posizionandolo all'interno
della pagina HTML:
<script>
window.dynCss.api.setBreakpoints([321, 480],'@win-width');
</script>L'istruzione @shouldAppear({when: expr, isHigherThan: val}) ritornerà il valore
0 quando expr è minore di val, mentre ritornerà 1 quando expr è maggiore di val.
Nei casi intermedi, il valore di ritorno sarà il rapporto expr/val quando risulterà compreso tra 0 ed 1.
Supponiamo adesso di volere impostare l'opacità di un elemento,
sulla base della posizione della finestra. Possiamo usare il seguente snippet di codice CSS:
.header {
-dyn-opacity: '@shouldAppear({when: @win-scrollTop, isHigherThan: @win-height/2})';
}Una versione più completa della precedente istruzione è @transitionToOne({when: expr, start: val, end: val}, power)
che fornisce valori compresi tra 0 e 1,
quando l'espressione expr è vicina al valore di start o di end.
Il parametro power indica il tipo di legge che deve seguire la transizione tra 0 ed 1.
Per esempio, supponiamo di volere decrementare l'opacità dell'header
dal valore massimo a quello minimo, quando la finestra viene scorsa per 400 pixel.
Potremmo utilizzare il seguente codice:
.header {
-dyn-opacity: '1-@transitionToOne({when : @win-scrollTop , start: 0, stop: 400 }, .5)';
}Infine, l'istruzione @morph(factor, v1, v2) restituisce la combinazione
lineare tra due valori v1 e v2, rispettivamente con peso factor e 1-factor.
Per esempio, potremmo rendere la larghezza di un elemento variabile tra 200 e 300 pixel
basandoci sui valori restituiti dalla funzione transitionToOne:
.element {
-dyn-width: '@morph(transitionToOne(...), 200, 300)';
}Per ogni ulteriore approfondimento, rimandiamo nuovamente all'esempio dimostrativo disponibile sul sito ufficiale di DynCSS.