userAgent Script…come selezionare il foglio di stile in base al browser
Dopo qualche settimana impegnativa, eccomi nuovamente tra di voi per introdurre qualche nuovo trucco di ottimizzare dei contenuti web in base al browser di accesso ad un sito.
Vi confesso che l'articolo "Mobile SEO prime riflessioni" è stato molto apprezzato con tanto di email con domande di chiarimenti, consigli e con alcune richieste di consulenze .
I complimenti e gli apprezzamenti sono sempre graditi ma ogni volta rimango basito dal fatto che gli utenti preferiscono sempre di più discutere privatamente e non pubblicamente le loro domande…infatti, la totalità dei visitatori, di questo blog,preferisce contattarmi privatamente tramite email per pormi le loro domande invece che utilizzare i commenti pubblici… speriamo che questo trand migliori con il corso del tempo.
Ma torniamo a noi, con questo post voglio rispondere in modo pubblico alla domanda ricevuta più frequentemente in queste due settimane e che riguarda la modalità di sviluppo di uno script java per selezionare il foglio di stile adeguato al tipo di browser utilizzato dall'utente.
Lo script, che vi propongo nel seguito del post, sfrutta lo userAgent per selezionare il foglio di stile adeguato al browser utilizzato dall'utente migliorando quindi la presentazione dei contenuti accessibili nel vostro sito.
Prima di illustrare lo script cerco brevemente di illustrarvi il concetto di UserAgent.
Che cos'è lo userAgent?
Lo user Agent è una qualsiasi applicazione che utilizza il protocollo di rete; in pratica è un'applicazione installata sul computer dell'utente che si collega ad un server.
Al momento dell'invio di una richiesta http da un browser (ma anche da una qualsiasi altro software di rete) fra le varie informazioni inviate è presente anche una stringa, chiamata userAgent String, il cui prefisso è "User-Agent", che comprende informazioni relative all'applicazione richiedente la connessione ma che può anche contenere anche altri dettagli come il tipo di sistema operativo utilizzato, la lingua e anche un'indirizzo email dello sviluppatore.
La struttura di questa stringa non è mai stata standardizzata quindi le informazioni da ricercare per distinguere i diversi browser si trovano sparse all'interno della stringa stessa.
Le informazioni contenute sono le seguenti:
"User-Agent" ":" 1* (product | Comment)
Product = dovrebbe indicare il nome (uso il condizionale perchè come vedremo nel seguito non tutti i browser inseriscono le loro informazioni in posizione)
Comment = contiene commenti di varia natura tipo informazioni sullo sviluppatore, versioni varie ecc.
Per Esempio:
Mozilla/4.04 (Win95; I)
Mozilla rappresenta il prodotto , 4.04 rappresenta la versione mentre tutto il contenuto tra parantesi tonde rappresenta il commento.
In teoria questa dovrebbe essere la struttura standard della stringa userAgent… ma nella realtà non è così in quanto, nel corso degli anni, i produttori di browser hanno sparso le informazioni in posizioni diverse nella stringa. Infatti, come possiamo vedere nel seguito, la stringa relativa ad internet explorer è diversa dalla precedente:
Mozilla/4.0 (compatibile, MSIE 8.0, Windows vista)
In questo caso Microsoft ha adottato la strategia di inserire il nome del browser e la relativa versione all'interno dei commenti... allo stesso modo anche Chrome e Safari hanno scelto di disporre le informazioni in posizioni diverse dai precedenti esempi.
Safari= Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_7; en-us) AppleWebKit/533.4 (KHTML, like Gecko) Version/4.1 Safari/533.4
Chrome = Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US) AppleWebKit/533.9 (KHTML, like Gecko) Chrome/6.0.400.0 Safari/533.9
Potete visualizzare una lista completa delle stringhe userAgent inviate dai diversi Browser cliccando qui!
Javascript per l'identificazione del Browser mediante UserAgent
Quello riportato nel seguito è un esempio di javascritp per identificare il tipo di browser e selezionare il foglio corrispondente in base alla stringa userAgent vista in precedenza.
Lo script che ho realizzato è una versione base e va integrato in base alle vostre esigenze.
Vi ricordo che gli script, all'interno di una pagina internet, vanno riportati tra il tag <head> di apertura e il tag </head> di chiusura
<SCRIPT language="Javascript1.2">
<!--
var chrome = (/Chrome/.test(navigator.userAgent))?1:0;
var safari = (/safari/.test(navigator.userAgent))?1:0;
var firefox = (/firefox/.test(navigator.userAgent))?1:0;
var ie=(/MSIE (\d+\.\d+);/.test(navigator.userAgent))?1:0;
if (chrome || (chrome && safari)){
document.write("<LINK rel=stylesheet href='chrome.css' type='text/css'");
}
if (ie){
var str = navigator.userAgent;
var index = str.search(/MSIE/);
var vers = str.substring(index+5,index+6);
if (vers == 8 )
document.write("<LINK rel=stylesheet href='ie8.css' type='text/css'");
}
if (vers == 7)
document.write("<LINK rel=stylesheet href='ie7.css' type='text/css'");
}
if(safari){
document.write("<LINK rel=stylesheet href='safari.css' type='text/css'");
}
if(firefox){
document.write("<LINK rel=stylesheet href='mozilla.css' type='text/css'");
}
//-->
</SCRIPT>
Le quattro variabili (chrome, safari, firefox, IE) verificano la presenza delle rispettive espressioni regolari (/Chrome/, /Safari/, /firefox/, /MSIE/) all'interno della stringa userAgent ottenuta mediante la funzione navigato.userAgent. Se la stringa userAgent contiene una o più delle espressioni regolari indicate in precedenza le rispettive variabili assumono il valore 1 altrimenti vengono poste a zero.Subito dopo le variabili sono presenti una serie di if in cascata per verificare quale delle variabili precendenti è stata settanta ad uno… quando la condizione è verificata verrà selezionato il foglio di stile corrispondente.I primi due if sono più interessanti in quanto nel primo caso (chrome || (chrome && safari)),per caricare il foglio di stile dedicato al browser di Google,è necessario verificare la presenza, nella stringa userAgent, della parola Chrome oppure la coppia Chrome e Safari in quanto gli ingegneri di Google hanno pensato di usare stringe diverse per versioni diverse dei Chrome invece di distinguerli solamente per la versione… Per esempio
Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US) AppleWebKit/533.2 (KHTML, like Gecko) Chrome/6.0
nel secondo caso è presente sia il termine chiome che safari
Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US) AppleWebKit/533.9 (KHTML, like Gecko) Chrome/6.0.400.0 Safari/533.9
Il secondo caso di interesse è relativo ad internet explorer in quanto il nome e la versione del browser sono presenti nei commenti della stringa userAgent. Per internet explorer, vista la sua capacità di non seguire gli standard HTML, è di fondamentale importanza creare fogli di stile diversi in base alla versione del browser. Per fare ciò sono state necessarie una serie di istruzioni aggiuntive che iniziano con l'istruzione var str = navigator.userAgent necessaria per ricavare la stringa userAgent, seguita dall'istruzione per ricavare l'indice della posizione del primo carattere dell'espressione regolare MSIE all'interno della stringa userAgent. Una volta individuato l'indice si estrae la sottostringa che identifica la versione del browser e a questo punto si distinguono i fogli di stile di internet Explorer in base alla versione.
Come avete potuto vedere il codice è molto semplice e permette di inviare all'utente il foglio di stile adeguato al browser che sta utilizzando… con la stessa metodologia e sfruttando la lista di userAgent raggiungibile da qui, potete caricare i fogli di stile adeguati al dispositivo mobile che richiede il vostro sito...
Piaciuto il consiglio?Ovviamente potete sviluppare anche altri metodi per ricavare il tipo di browser dalla userAgent String ma qui lascio a voi il piacere di sviluppare in base alle vostre esigenze.… voi solitamente che tipo di scelte effettuate in base allo sviluppo di una pagina internet a livello di compatibilità e visualizzazione per un sito internet?
About Me – Preview
Social-Channel
 |
 |
 |
Categories
Foursquare Conf
Recent Posts
- Dal 1998 al 2011: La rivoluzione della comunicazione
- Buon Natale
- Nuovo Twitter e Google Current le novità Natalizie
- iOS5 un mese dopo
- 5 ragioni per cui il dominio e’ meno importante
- Thanks Steve
- Il Tweet button non aumenta la condivisione di 7 volte
- Contenuti di Qualita’ …. questi sconosciuti
- Buone Vacanze
- Vuoi Lion ?? Ecco alcuni consigli
Archives
- January 2012
- December 2011
- November 2011
- October 2011
- September 2011
- August 2011
- July 2011
- June 2011
- May 2011
- April 2011
- March 2011
- February 2011
- January 2011
- December 2010
- November 2010
- October 2010
- September 2010
- August 2010
- July 2010
- June 2010
- May 2010
- April 2010
- March 2010
- February 2010
- January 2010
- December 2009
- November 2009
- October 2009