Riconoscere il browser con javascript

Uno dei problemi che più ci assilla a noi webdesigners(diciamo la verità, ci ha rotto il c***) è la errata interpretazione dei fogli di stile da parte dei browser, e naturalmente in prima fila ci sono i browser di casa Microsoft.

Anche se Internet explorer 7 è migliorato e la versione 8 sembra, ripeto sembra,  essere ancora migliore, siamo lontani da una perfetta compatibilità. Su Internet explorer 6, inutile parlarne, un disastro totale!! Il problema più grande è che ancora oggi molti usano internet explorer 6, e non ne vogliono sapere di aggiornare alla versione 7, complici anche le migliaia di copie pirata in giro per il mondo. Quindi come fare?

Molti ricorrono agli hacks e ai workaround, ma a dirla tutta non sono un amante di queste tecniche, anche perche invalidano il codice css, e non so voi, ma io sono un pò fissato con la validazione del codice, soprattutto quando il sito è di un cliente e non il mio.

Infatti al nuovo progetto a cui sto lavorando, ho cercato di disegnare le pagine senza usare hack o altro, ma caricando fogli di stile differenti, o meglio aggiungendo fogli di stile per “correggere” i difetti dei due browser.

Una delle tecniche piu conosciute per fare questo sono i commenti condizionali,io invece, grazie al mio amico e collega programmatore Juan Carlos, ho preferito usare un javascript per riconoscere il browser e quindi caricare il corretto foglio di stile.

Visto che alcune cose erano differenti anche per Internet explorer 7, ( padding, positioning e altre cosette) il mio amico Juan Carlos mi ha passato un javascript, semplice semplice, che mi permette di riconoscere il browser, sia explorer 7 che la versione 6, cosi ho potuto caricare i fogli di stile con le “correzioni” senza usare commenti condizionali, senza usare hack o altro, ottenendo cosi un codice “pulito”, naturalmente inutile dire che per quanto ci possa provare con explorer 6 qualcosina cambia sempre!

Ma ad ogni modo abbiamo migliorato parecchio, anche in considerazione del fatto che il 20% dei visitatori di questo sito usano explorer 6, e parlo di un sito internazionale, quindi non spagnolo, o almeno visitato da diversi posti nel mondo, forse quwsto è il dato piu preoccupante, se cosi tanta gente ancora usa internet explorer 6!!

Ad ogni modo, passiamo al javascript :

var ievs = (/MSIE (\d+\.\d+);/.test(navigator.userAgent));

// IF BROWSER IS IE 6 LOAD IE6 STYLE

if (ievs){

var iev=new Number(RegExp.$1);

if (iev==6) {

document.write(‘<link rel=”stylesheet”  href=”css/ie7style.css” type=”text/css” />’);

}

}

// ID BROWSER IS IE 7 LOAD IE7 STYLE

if (ievs){

var iev=new Number(RegExp.$1);

if (iev==7) {

document.write(‘<link rel=”stylesheet”  href=”css/ie7style.css” type=”text/css” />’);

}
}

Ecco fatto! Ora il browser verra riconosciuto dal javascript e verra caricato il foglio di stile appropriato, naturalmente tenete presente due cose:

1) linkare il javascript con il tag script

2) cambiare la direzione del vostro foglio di stile dove al posto di :

css/ie7style.css

metterete il percorso dove si trova il vostro file css.

Ho messo qua un esempio per farvi capire il funzionamento, provate a visitare la pagina con uno dei due browser Microsoft .

Qua invece la versione scaricabile con esempio e javascript completo

Ti e piaciuto l’articolo? Parliamone nel Forum.

Hasta Luego!

(2 votes, average: 2,50 out of 5)

 Loading ...

Potrebbero interessarti anche :

• Menu animato con jquery (7)
• Uno slideshow ancora con jquery (3)
• Una gallery animata con jquery e css (6)
• Date con Javascript (0)
• Menu a scorrimento verticale con css e jquery (18)