Niente più browser hacks in Contao 2.10
19/04/2011 17:18 a cura di Paolo B.
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
Aggiungi un commento