browserclass
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().