Rilevare il browser e supportare browser diversi

Le pagine di questo sito sono ottimizzate per Microsoft Internet Explorer 4+ e Netscape Navigator 4+. Come molti sviluppatori web ben sanno, uno dei limiti di JavaScript risiede nel browser stesso, che spesso non rispetta gli standard proposti per l'HTML e per il codice JavaScript. 

Chiunque si sia trovato a provare il codice scritto su un browser differente da quello utilizzato, ha dovuto affrontare il problema di doverlo adattare, per renderlo fruibile su piattaforme diverse o tramite browser di case produttrici meno note.

Se si usa un metodo inappropriato per rilevare il browser in uso, il controllo delle pagine web può diventare estremamente complesso. Come abbiamo scritto nella sezione relativa all'oggetto navigator, esistono più  modi di affrontare il problema. In questa sede affronteremo le caratteristiche ed i limiti di alcune tra le più comuni strategie utilizzate.

Agli albori del web, le pagine statiche scritte in codice HTML erano molto semplici e non implicavano script lato client. Poteva comunque rivelarsi necessario gestire il codice secondo il browser usato dall'utente. Nasceva così la prima tecnica, basata sulla stringa dello user agent, il nome del browser. Questa stringa, definita secondo il protocollo HTTP, era disponibile ai web server. L'approccio più comune era quello di distinguere lo user agent attraverso la casa produttrice, definita vendor, e la versione, utilizzando la stringa intercettata.

Netscape Navigator 2 introdusse la possibilità di eseguire codice lato client presentando JavaScript. Gli sviluppatori web non potevano più limitarsi a distinguere i browser attraverso la stringa user agent dal server web, e volendo sfruttare le potenzialità offerte da JavaScript si rese necessario trovare un sistema per rilevare se il browser usato supportasse il codice lato client. Uno dei primi approcci in tal senso fu distinguere gli oggetti supportati, ad esempio controllando se il browser supportasse la collection document.images.

JavaScript permette di riconoscere la casa produttrice e la versione di un browser attraverso l'oggetto navigator e la proprietà userAgent, così molti sviluppatori utilizzarono la stessa logica che precedentemente era stata usata lato server. Furono inoltre rese disponibili le proprietà navigator.appName e navigator.appVersion.

Netscape Navigator 4 e Internet Explorer 4 hanno introdotto per primi la possibilità di gestire l'HTML rendendolo dinamico, attraverso le funzionalità proposte con l'HTML dinamico, o DHTML, e il supporto dei fogli di stile, o CSS. Queste nuove versioni del browser aggiunsero ulteriori elementi, incompatibili gli uni con gli altri. Divenne per questo di uso comune la distinzione tra la collezione document.layers, introdotta da Netscape Navigator, e la collezione document.all, introdotta da Microsoft.

Le strategie descritte si possono rivelare entrambe insufficienti. Nel primo caso, essendo oramai presenti numerosi browser installati su diversi sistemi operativi, diventerebbe estremamente difficoltoso distinguere non solo il nome e la versione del browser, ma anche la piattaforma sulla quale è installato, oltre alla versione JavaScript supportata. Nel secondo caso, si rischia di limitare la gestione del codice alle ultime versioni di Navigator o di Internet Explorer.

L'esempio successivo:

if (document.all) { 
    // codice per Internet Explorer 4+ 
        elemento_gestito = document.all['elemento'];
}
 else { 
    // codice per Navigator 4 
       elemento_gestito = document.layers['elemento']; 
}

mostra un caso in cui si può facilmente incorrere in problemi di visualizzazione da parte di utenti che utilizzano browser come Opera o Netscape 6+, che non supportano i livelli, o layers. Questi ultimi non sono elementi standardizzati, così come non lo è la collection document.all per MSIE. Poiché le ultime generazioni dei browser più utilizzati su piattaforma Microsoft supportano la proprietà document.getElementById, il codice precedente potrebbe ulteriormente complicarsi:

if (document.all) { 
    // codice per Internet Explorer 4+ 
        elemento_gestito = document.all['elemento'];
}
 else { 
    if(document.layers)
    // codice per Navigator 4 
       elemento_gestito = document.layers['elemento'];
    else
        // codice che si presuppone essere utilizzato da Netscape 6+
        elemento_gestito = document.getElementById('elemento');
}

Nel sito abbiamo trattato le diverse tecniche riferendoci all'oggetto navigator e sviluppando gli esempi siamo incorsi nella difficoltà di dover differenziare il codice: purtroppo, a causa dell'impossibilità di dedicarci a tempo pieno allo sviluppo del sito, è stato necessario limitare la visualizzazione degli esempi a quei browser che supportano gli oggetti da noi trattati. Di questo ci scusiamo, in particolare con gli utenti che visualizzano le pagine con altri browser, come l'ormai diffusissimo Opera.


Note: consiglio a questo riguardo l'articolo Browser Detection and Cross Browser Support di Bob Clary, disponibile sul sito http://devedge.netscape.com

Torna all'inizio | Home