lunedì 27 ottobre 2008

classi css dinamiche vs. hacks

Tradizionalmente, abbiamo combattuto contro le incongruenze dei vari browser, aggiungendo codice css specifico per fissare il comportamento non standard.
il problema fino ad ora è stato individuare questi browser e porvi rimedio.
alla prima parte del problema, si può ovviare con i così detti hacks, cioè istruzioni mal formate che vengono interpretate solo in certe circostanze. nelle situazioni più favorevoli l'unico browser di cui occorrerà curarsi sarà IE, per il quale esiste una tecnica specifica, detta commento condizionale, con cui generalmente si include un css apposito.
questo css separato è sempre meglio degli hacks, che sono francamente inleggibili e impossibili da mantenere, ma ancora scomodo perché divide su più files le regole necessarie alla resa corretta della pagina.
una prima evoluzione del problema consiste nel usare i commenti condizionali per taggare il documento, in questo modo possiamo organizzare efficacemente il css.
questa tecnica è efficace, veloce e pulita ma funziona esclusivamente su IE, non funziona per safari ed opera e non distingue le diverse versioni dei navigatori ne il sistema operativo.
La naturale evoluzione di questo sistema permette di rivelare ogni dettaglio del navigatore in modo da scrivere codice preciso e pulito, prendendo spunto da questo articolo, ho ricavato la seguente funzione:


(function(){
var u=navigator.userAgent.toLowerCase(),
i=function(t){return u.indexOf(t)>-1;},
g='gecko',w='webkit',
c=[(!(/opera|webtv/i.test(u))&&/msie\s(\d)/.test(u)) ? ('ie ie'+RegExp.$1):
i('firefox/2')?g+'ff2':
i('firefox/3')?g+'ff3':
i(g+'/')?g:
/opera\s(\d)/.test(u)?'opera opera'+RegExp.$1:
i('konqueror')?w+'konqueror':
i('chrome')?w+'chrome':
i('applewebkit/')?w+'safari':
i('mozilla/')?g:'',
,i('mac')?'mac':i('win')?'win':''
,'js'];
alert(u);
document.getElementsByTagName('html')[0].className += c.join(' ');
})();


questa funzione è leggerissima ed esegue istantaneamente, regala a css l'elasticità che dovrebbe avere di default.

A mio parere una ulteriore evoluzione di questo metodo dovrebbe avvenire con un calcolo effettuto sul server, il browser deve infatti conoscere in anticipo come applicare i selettori e se il dom viene modificato da uno script, la renderizazione si ferma fintanto che non avviene la modifica e poi la cascata css deve essere ricalcolata, per cui o la si carica prima di ogni file css, oppure alla fine del caricamento del documento.

0 commenti: