2011-04-19 11:09 by Leo Feyer

Forget about browser hacks in Contao 2.10

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.

About Leo Feyer

Leo is the lead developer of Contao and, together with the core team, ensures that the future of Contao begins in the present. During the day he is a server administrator at Hostingwerk and at night he codes the heck out of it.

Comments

Comment by Tsarma | 2011-04-19

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 | 2011-04-19

Sounds great. Looking to test it myself.

Comment by Dan Nelu | 2011-04-20

It sounds fantastic!

Comment by Kamil Kuzminski | 2011-04-20

That is so awesome solution!

Comment by Tonu Mikk | 2011-04-27

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.