CSS: Un'alternativa per non usare gli hacks

Tutti gli sviluppatori di siti web sanno che alcuni stili vengono visualizzati in modo diverso nei vari browser. Per correggere questa cosa, solitamente si usano i 'css hacks'.
Voglio farvi vedere un'ottima soluzione alternativa per non utilizzare gli 'hacks' tramite javascript:

<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&#8242;)?’gecko ff2&#8242;
:is(’firefox/3&#8242;)?’gecko ff3&#8242;
:is(’gecko/’)?’gecko’
:is(’opera/9&#8242;)?’opera opera9&#8242;:/opera (d)/.test(u)?’opera opera’+RegExp.$1
:is(’konqueror’)?’konqueror’
:is(’applewebkit/’)?’webkit safari’
:is(’mozilla/’)?’gecko’:”,
(is(’x11&#8242;)||is(’linux’))?’ linux’
:is(’mac’)?’ mac’
:is(’win’)?’ win’:”
].join(" "));
}();
</script>

Dopo l'esecuzione, possiamo utilizzare questi stili per i 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.

Per esempio: se si vuole che il testo in Opera sia rosso potremmo scrivere:

.opera div {
    color:red;
}

0 commenti:

Posta un commento