CSS dinamici con Javascript
Lunedì 3 Dicembre 2007 - 09:53
di Riccardo Degni
Tempo fa qui su Edit si è discusso della bontà di un’idea come quella di introdurre nei CSS logiche e metodi tipici dei linguaggi di programmazione. Nel post venivano segnalate anche alcune soluzioni server-side per ottenere il risultato.
Un nuovo plug-in per MooTools molto interessante chiamato Css.js permette di applicare degli stili CSS agli elementi del nostro DOM in modo dinamico, agendo però sul lato client. Nelle parole dell’autore, è una tecnica utile non solo per implementare CSS dinamici e programmati, ma anche per risolvere facilmente problemi di compatibilità tra i browser e per creare proprietà personalizzate.
La sintassi da utilizzare per aggiungere le regole di stile sono le stesse che si userebbero in un normale foglio CSS. Prima di tutto creiamo un’istanza della classe CSS, richiamamiamo il metodo add_rules e passiamogli un oggetto le cui proprietà di tipo stringa sono un ulteriore oggetto che rappresenta le regole CSS desiderate:
var css = new CSS();
css.add_rules({
'p.code':
{
'white-space': 'pre'
},
'p.title, a.myLink':
{
'color': '#ff0000',
'margin-top':: '10px'
}
}).refresh();
In questo modo abbiamo dichiarato le nostre nuove regole dinamiche. Inoltre, è possibile creare delle proprie regole personalizzate (in base ad esempio al tipo di browser utilizzato) grazie al metodo implement nativo del costruttore Class:
CSS.implement({
'trident_opacity': function(value, property)
{
return ['filter', 'alpha(opacity=' + (value * 100) + ')'];
}
});
Su Ajaxian molti commenti si soffermano sul fatto che certe cose sarebbe meglio affidarle al lato server. Voi che ne pensate?
Categoria: Scripting | Permalink
Commenti
1
Sicuramente meglio non affidare parti fondamentali dei CSS al javascript.
Per risolvere compatibilità fra i browser (che nel 95% dei casi sono gli IE) mi bastano i commenti condizionali.# - postato da Grab - 03 Dicembre 2007 - 10:53
2
Anche io sono dell’opinione di Grab anche perchè mi sa che in questo modo si va a rompere in qualche modo la robustezza di cui il CSS era la ragione di essere. Ciao
3
a me sembra una ottima idea, che condivido e che avevo pensato senza arrivare ad una implementazione. la mia riflessione nasce dalla voglia di usare un framework css e rendermi conto che è praticamente impossibile riutilizzare le regole senza avere a disposizione un minimo di costrutti tipici della programmazione. css da solo non è sufficiente e le risposte non possono essere sul server. ricorrere ai commenti condizionali e hack vari produce codice sporco, su un framework complesso diventa illeggibile.
# - postato da smt - 03 Dicembre 2007 - 14:58
4
Credo che l’approccio migliore sia lato server, anche se io ho sempre usato gli hack senza darmi troppi problemi.
5
opacity, border-radius, risoluzione, screen width: come diavolo fai a metterci una pezza sul server?
sono dati che hai e che puoi (a mio parere devi) manipolare sul client.
css gira nel browser non sul server…
voi per quale motivo ritenete che si dovrebbe generare sul server? js è fatto apposta, php no!
posso al limite concepire una soluzione ibrida, helpers sul server, css e javascript mandati sul client, ma c’è chi discute l’utilità degli helpers in genere, dicendo che una libreria js che ha bisogno di auito sul server, ha una interfaccia migliorabile.# - postato da smt - 03 Dicembre 2007 - 21:28
6
L’osservazione di smt su opacity, border-radius, risoluzione, screen width, ecc., la trovo opportuna ma, finchè js potrà essere disabilitato nelle preferenze dell’utente, non credo sia saggio affidargli alcunchè.
# - postato da frankeyboard - 19 Marzo 2008 - 14:59