Summary

This small module helps theme-developers to deal with cross-browser compatibility. It makes easier to handle different types of non-widespread browsers just as much as it helps with using different versions of Internet Explorer.
The module extends the $body_classes variable in page.tpl.php based on the enduser's browser, and platform.

The module also makes a $browser_classes variable available in page.tpl.php, which stores the data in an array, this way the developer can make use of it as needed, if he does not wish to use the $body_classes variable.

Supported browsers

  • ie
  • opera
  • safari
  • chrome
  • netscape
  • ff
  • konqueror
  • dillo
  • chimera
  • beonex
  • aweb
  • amaya
  • icab
  • lynx
  • galeon
  • operamini

Browser version checking

The module creates version classes.

  • ie[version]
  • opera[version]
  • chrome[version]
  • safari[version]
  • netscape[version]
  • ff[version]
  • konqueror[version]
  • operamini[version]

Supported platforms

  • win
  • ipad
  • ipod
  • iphone
  • mac
  • android
  • linux
  • nokia
  • blackberry
  • NetBSD
  • FreeBSD
  • OpenBSD

Mobile detecting

The module checks if the device is mobile and adds "mobile" or "desktop" class.

Token support

The module creates tokens, which will be greatly helpful when a user reports a site problem and a site administrator will receive a message with details regarding the user, including his/her browser class .
See the full discussion at #1052858: token for user's browser.

Currently available tokens

  • The current user's browser classes: [browserclass]
  • Browser type: [browserclass-browser]
  • Platform: [browserclass-platform]
  • Device info: [browserclass-mobile]
  • Extra hook classes: [browserclass-hook-classes]

Configuration

The module has a settings page, where the administrator can choose between these options:

  • always add the class with JavaScript
  • only use JavaScript if page cache is enabled

This is a fallback option for JS disabled browsers, and no JavaScript will run on page load if it's not necessary.

Example

In html:

<body class="... chrome chrome11 mac desktop">
...
</body>

In css:

body.chrome.mac p {
  font-size: 11px;
}

Developers

Developers can add their own classes with hook_browserclass_classes().

Supporting organizations: 
Latest implementation and Maintenance

Project information

Releases