esperienze di programmazione.

Per evitare i CSS hacks

Sep 17, 08 • Web design2 CommentsRead More »

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&#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>

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;
}

Tags: ,

2 Responses to Per evitare i CSS hacks

  1. Mattia says:

    Ciao,
    mi puoi dare un esempio.
    Mi da problemi di formattazione di js.
    Magari se mi puoi segnalare un sito dove l’hai usato

    Grazie mille

    Mattia

  2. Alberto Mori says:

    In relatà l’esempio è già nel codice. Il codice javascript attiva delle classi a secondo del browser che visualizza il sito. Tu puoi creare, nel css, degli stili che, come classi, includono sempre una delle classi specifiche del browser.
    es.
    .opera div{
    color:red;
    }
    .safari div{
    color:black;
    }
    .ff3 div{
    color:green;
    }

    Come sicuramente sai, questo tipo di selettore indica che qualsiasi div che si trovi discendente di una delle classi che rappresentano il browser, deve applicare lo stile tra graffe. Quindi un div in ff3 sarà verde, un div in safari sarà nero, un div in opera, sarà rosso.
    Ovviamente le classi rappresentanti i browser non esistono veramente, perché selettori come quelli non esistono, vengono creati a runtime da javascript con il codice iniziale e associati all’elemento html che l’elemento root di ogni pagina html.