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:

$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.

Show all news


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

Please add 3 and 6.