Contao news
Read the official Contao announcements.
Forget about browser hacks in Contao 2.10
by Leo Feyer – From practice
The upcoming Contao version 2.10 includes a very powerful new feature which allows you to forget about CSS hacks, conditional comments and other browser detection measures: It will add different CSS classes to the body tag depending on the operating system and browser.
Granted, the idea is not new at all. Many of the popular modernizer scripts use CSS classes to indicate whether certain features are available or not. However most of them rely on JavaScript and therefore do not work when JavaScript is disabled, whereas the Contao solution is 100% PHP-based.
A quick example
Let us assume you are using Internet Explorer 8 on Windows 7, then your body tag will look like this:
<body class="win ie ie8">
If you are using Firefox 4 on Mac OS X, it will look like this:
<body class="mac firefox fx4">
And if you are viewing a page on your iPhone, the body tag will look like this:
<body class="iphone safari sf5 mobile">
Now in your style sheet, instead of using selector hacks or conditional comments, you can simply write:
/* 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; }
Full documentation
The first class indicates the operating system of the client (e.g. mac, win or unix). The second class consists of the full browser name (e.g. firefox, ie, chrome or safari) followed by a two-letter shortcut with the version number (e.g. fx4, ie9, ch10 or sf5). If the client is a mobile browser, the additional class mobile is added.
Supported operating systems
| Name | Class | Mobile |
|---|---|---|
| Macintosh | mac | false |
| Windows CE, Windows Phone | win-ce | true |
| Windows | win | false |
| iPad, iPhone, iPod Touch | ios | true |
| Android | android | true |
| Blackberry | blackberry | true |
| Symbian | symbian | true |
| WebOS | webos | true |
| Linux, FreeBSD, OpenBSD, NetBSD | unix | false |
| Other operating system | unknown | false |
Supported browsers
| Name | Class | Shortcut | Example |
|---|---|---|---|
| Internet Explorer | ie | ie | ie9 |
| Firefox | firefox | fx | fx4 |
| Chrome | chrome | ch | ch10 |
| OmniWeb | omniweb | ow | ow5 |
| Safari | safari | sf | sf5 |
| Opera Mini | opera-mini | oi | oi6 |
| Opera Mobile | opera-mobile | om | om11 |
| Opera | opera | op | op10 |
| IEMobile | ie-mobile | im | im6 |
| Camino | camino | cm | cm2 |
| Konqueror | konqueror | ko | ko4 |
| Other browser | other | - | - |
Developer information
Of course, you can also use the new feature in your custom extension. The method has been added to the Environment class as $this->Environment->agent. It returns an object with the following information:
$this->import('Environment');
$ua = $this->Environment->agent;
echo $ua->os; // Operating system
echo $ua->browser; // Browser name
echo $ua->shorty; // Browser shortcut
echo $ua->version; // Browser major version
echo $ua->mobile; // True if the client is a mobile browser
echo $ua->class; // The CSS classes string
You can test the new feature in Revision 678.
Comments
Comment by Tsarma |
Sounds really promising, I'm looking forward to it. I've actually tried this 100% PHP-based solution once, but I gave up as it breaks when I turn on the Contao's page cache function. I hope you have throughly tested this with cache turned on. Hope it'll work...
Comment by Arthur Bezner |
Sounds great. Looking to test it myself.
Comment by Dan Nelu |
It sounds fantastic!
Comment by Kamil Kuzminski |
That is so awesome solution!
Comment by Tonu Mikk |
I am glad Contao developers are thinking about ways to make the website creators life easier. This new feature will be especially handy for creating mobile versions of a web site.
Add a comment