Ho letto in rete un ottimo articolo per evitare l’utilizzo dei CSS hacks. Il problema è affrontato in maniera diversa da come mi sarei immaginato, ma la soluzione è funzionale ed elegante. In pratica si tratta di aggiungere del codice javascript in modo da poter creare, successivamente, degli stili personalizzati per ogni browser, in maniera semplice ed intuitiva.
Vi posto il codice sorgente:
<script type="text/javascript">
var cssFix = function(){
var u = navigator.userAgent.toLowerCase(),
addClass = function(el,val){
if(!el.className) {
el.className = val;
} else {
var newCl = el.className;
newCl+=(" "+val);
el.className = newCl;
}
},
is = function(t){return (u.indexOf(t)!=-1)};
addClass(document.getElementsByTagName(’html’)[0],[
(!(/opera|webtv/i.test(u))&&/msie (d)/.test(u))?(’ie ie’+RegExp.$1)
:is(’firefox/2′)?’gecko ff2′
:is(’firefox/3′)?’gecko ff3′
:is(’gecko/’)?’gecko’
:is(’opera/9′)?’opera opera9′:/opera (d)/.test(u)?’opera opera’+RegExp.$1
:is(’konqueror’)?’konqueror’
:is(’applewebkit/’)?’webkit safari’
:is(’mozilla/’)?’gecko’:”,
(is(’x11′)||is(’linux’))?’ linux’
:is(’mac’)?’ mac’
:is(’win’)?’ win’:”
].join(" "));
}();
</script>
Questo codice attiva i seguenti stile per i relativi browser.
.ie — Tutte le versioni di IE; .ie8 — IE 8.?; .ie7 — IE 7.x; .ie6 — IE 6.x; .ie5 — IE 5.x; .gecko — Tutte le versioni di Firefox; .ff2 — Firefox 2; .ff3 — Firefox 3; .opera — Tutte le versioni di Opera; .opera8 — Opera 8.x; .opera9 — Opera 9.x; .konqueror — Konqueror; .safari — Safari.
E questo è un piccolo esempio: in questo caso verrebbe visualizzato il testo in rosso in Opera.
.opera div {
color:red;
}
