lunedì 8 settembre 2008

Mootools 1.2. Identificare browser e sistema operativo

Visto che Mootools 1.2 è stato rilasciato di recente, credo sia interessante iniziare a scrivere qualcosa su questa nuova versione del framework.

Per iniziare da qualcosa di semplice vediamo alcuni esempi di funzioni per determinare il nome, la versione e altre informazioni sul browser dell'utente. Visto che problemi di compatibilità fra browser sono sempre in agguato, spesso uno script deve essere in grado di compiere funzioni diverse a seconda del browser all'interno del quale viene eseguito.

Per fare questo si utilizzano alcuni metodi dell'oggetto Browser, inizializzato da Mootools e reso disponibile ai nostri script.

I browser vengono identificati in base al loro motore interno (rendering engine o layout engine). La funzione di un rendering engine è quella di visualizzare una pagina web così come la vediamo sullo schermo partendo dalle informazioni ricavate dal sorgente HTML (o XML) e dai fogli di stile CSS.

Si potrebbe dire che un'altra funzione non meno importante sia quella di rendere la vita dei web designer di tutto il mondo mai monotona e sempre ricca di sorprese grazie ai numerosi bachi e incompatibilità che fanno sì che lo stesso sorgente HTML mai produca lo stesso risultato visivo in tutti i browser.

Il nome del rendering engine in Mootools si ricava con

Browser.Engine.name

Esistono poi delle scorciatoie per individuare i diversi browser e relative versioni.

Identificare Internet Explorer

Il rendering engine di Internet Explorer è chiamato Trident.

if(Browser.Engine.trident) {
  alert('Internet Explorer');
  if(Browser.Engine.trident4) {
    alert('IE6');
  } else if(Browser.Engine.trident5) {
    alert('IE7');
  }
}

Identificare Mozilla o Firefox

Il rendering engine è chiamato Gecko

if(Browser.Engine.gecko) {
  alert('Mozilla / Firefox');
}

Identificare Opera

Il rendering engine è chiamato Presto

if(Browser.Engine.presto ) {
  alert('Opera');
  if(Browser.Engine.presto925 ) {
    alert('versione 9.25 o precedente');
  } else if(Browser.Engine.presto950 ) {
    alert('versione 9.50 o successiva');
  }
}

Identificare Safari o Google Chrome

Il rendering engine è chiamato Webkit

if(Browser.Engine.webkit ) {
  alert('Safari / Chrome / Webkit');
  if(Browser.Engine.webkit419) {
    alert('versione 419 o precedente');
  } else if(Browser.Engine.webkit420) {
    alert('versione 420 o successiva');
  }
}

Ricavare la versione del plugin Flash

Un'altra informazione che Mootools mette a disposizione è il numero di versione (major e build) del plugin Flash installato nel browesr.

alert(' Numero versione Flash: ' + 
Browser.Plugins.Flash.version);

alert('Numero build Flash: ' + 
Browser.Plugins.Flash.build);

Identificare il sistema operativo

Infine è possibile ricavare il sistema operativo dell'utente.

alert(Browser.Platform.name);
if(Browser.Platform.mac) {
  alert ('Mac');
} else if(Browser.Platform.win) {
  alert ('Windows');
} else if(Browser.Platform.linux) {
  alert ('Linux');
} else if(Browser.Platform.ipod) {
  alert ('Ipod');
} else if(Browser.Platform.other) {
  alert ('altro');
}

È tutto. Il sorgente completo dello script in un formato più adatto al copia e incolla lo trovate qui. Per testarlo è necessario anche scaricare Mootools 1.2 e includere lo script nell'header come nell'esempio.

2 commenti:

Anonimo ha detto...

Ciao
Ringrazio molto per i tuoi articoli sempre molto chiari.
Mi sto avvicinando per la prima volta a Mootools e questi articoli mi sono di aiuto.
Posso chiedere se conosci anche jQuery? E Se si, che differenze ci sono tra questi 2 framework?
Grazie ancora
Ciao Elena

Massimo ha detto...

Non conosco bene jQuery, da quello che leggo sembra però un buon framework, dovrebbe essere abbastanza facile trovare esempi di codice e documentazione online.

Posta un commento

Nota. Solo i membri di questo blog possono postare un commento.