Niente più browser hacks in Contao 2.10

19/04/2011 17:18 a cura di Paolo B.

La prossima versione Contao 2,10 includerà una funzionalità molto potente che ci permetterà di eliminare i commenti condizionali e altre misure di rilevamento del browser.
Saranno aggiunte diverse classi CSS per il tag body a seconda del sistema operativo e del browser.

Il concetto non è nuovo e già viene utilizzato. Molti degli script di recente realizzazine usano classi CSS per indicare se alcune funzioni sono disponibili o meno. Tuttavia la maggior parte di questi si basano su JavaScript e quindi non funzionano quando questo è disabilitato, mentre la soluzione che verrà introdotta in Contao è al 100% PHP-based.

Alcuni esempi:
Se si sta utilizzando IE8 sul sistema operativo Windows 7 l'elemento body sarà

1.<body class="win ie ie8">


Se il vistitatore utilizza Firefox4 su Mac OS X avremo

1.<body class="mac firefox fx4">


Se invece si sta navigando il sito tramite iPhone risulterà

1.<body class="iphone safari sf5 mobile">



Nel foglio di stile, invece di usare commenti condizionali, si può semplicemente scrivere:

/* General format */
#wrapper { width:960px; }

/* Adjust the format in Opera */
.opera #wrapper { width:940px; }

/* Add a special format for IE6 and Safari 2 on Windows */
.ie6 #wrapper, .win.sf2 #wrapper { width:980px; }

/* Adjust the width on mobile devices */
.mobile #wrapper { width:480px; }



Documentazione
La prima classe indica il sistema operativo del client (ad esempio Mac, Win o Unix). La seconda classe è costituita dal nome completo browser (ad esempio Firefox, IE, Chrome o Safari), seguita da una classe che indica anche la versione (ad esempio FX4, IE9, CH10 o SF5). Se il client è un browser mobile, verrà aggiunta una ulteriore classe mobile.

Sistemi operativi

Name Class Mobile
Macintosh mac false
Windows CE
 win-ce true
Windows win false
Android android true
Linux, FreeBSD, OpenBSD unix false
iPad ipad true
iPhone, iPod Touch iphone true
Blackberry blackberry true
Palm palm true

Browsers

Name Class Shortcut Example
Firefox firefox fx fx4
Chrome chrome ch ch10
Safari safari sf sf5
IEMobile ie-mobile im im6
Internet Explorer ie ie ie9
Opera Mini opera-mini oi oi6
Opera Mobile opera-mobile om om11
Opera opera op op10
Camino camino cm cm2


Informazioni per sviluppatori

Questa nuova funzionalità sarà disponibile anche per gli sviluppatori.

Un nuovo metodo è stato aggiunto alla classe Environment, $this->Environment->agent.

Si potranno leggere le informazioni dettagliate in questo modo:

01.$this->import('Environment');
02.$ua = $this->Environment->agent;
03. 
04.echo $ua->os; // Operating system
05.echo $ua->browser; // Browser name
06.echo $ua->shorty; // Browser shortcut
07.echo $ua->version; // Browser major version
08.echo $ua->mobile; // True if the client is a mobile browser
09.echo $ua->class; // The CSS classes string

Torna indietro

Aggiungi un commento