RSS

Clean CSS with Server-Side Browser Detection (2/2)

13 May

In the first article of this duo I explained the use case for server-side browser detection. In this second post I will give a practical example, including some sample Java, HTML and CSS code.

Practical Use Case

Let’s create a simple download page with three variants:

  • an EXE file for Windows users;
  • a DMG file for Mac OS X users;
  • and a TAR GZ file for Linux users.

When the operating system of the visitor is either of these three, then the appropriate download should be highlighted.

Here’s what the result HTML5 should resemble:

<!doctype html>
<html lang="en" class="BrowserOS-Windows">
<head>
  <meta charset="utf-8">
  <title>Downloads</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>Downloads</h1>
    <ul class="DownloadLinks">
      <li><a class="Windows" href="/install.exe">Windows installer (EXE)</a></li>
      <li><a class="Mac"     href="/install.dmg">Mac OS X installer (DMG)</a></li>
      <li><a class="Linux"   href="/install.tgz">Linux installer (TAR GZ)</a></li>
    </ul>
</body>
</html>

Then this is the CSS:

body {background:white;}
h1 {color:green;}

.DownloadLinks a {border:1px solid white;}

.BrowserOS-Windows .DownloadLinks a.Windows,
.BrowserOS-MacOS   .DownloadLinks a.Mac,
.BrowserOS-Linux   .DownloadLinks a.Linux {border-color: green; font-weight:bold;}

The Java Library ‘uasniffer’

When using Java, you can use the uasniffer library I wrote. It takes an agent string and transforms it to what can be used as CSS class names. For example, the following agent string:

Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.0)

is transformed to the following names:

Device-Desktop
Device-NoPhone
Browser-MSIE
Browser-DesktopMSIE
Browser-DesktopMSIE-7
Browser-DesktopMSIE-7-0
Browser-DesktopMSIE-7-0-0
BrowserEngine-Trident
BrowserOS-Windows
BrowserOS-Windows-NT
BrowserOS-Windows-NT-6
BrowserOS-Windows-NT-6-0
BrowserOS-Windows-Vista

Compiling the Library

To use this library, you need to get it from the Git version control system first:

git clone https://github.com/znerd/uasniffer.git

This will create a uasniffer directory. Then go to that directory and compile it using Maven. E.g., from the command line:

mvn package

Implementation With a JSP

A JSP that would use this library could be written as follows:

<%@ page import="org.znerd.uasniffer.*" %><%
String agentString = request.getHeader("user-agent");
String uaClasses = AgentSniffer.analyze(agentString).getNamesAsString();
%><!doctype html>
<html lang="en" class="<%=uaClasses%>">
<head>
  <meta charset="utf-8">
  <title>Downloads</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>Downloads</h1>
    <ul class="DownloadLinks">
      <li><a class="Windows" href="/install.exe">Windows installer (EXE)</a></li>
      <li><a class="Mac"     href="/install.dmg">Mac OS X installer (DMG)</a></li>
      <li><a class="Linux"   href="/install.tgz">Linux installer (TAR GZ)</a></li>
    </ul>
</body>
</html>

Conclusion

In general, avoid browser sniffing. When you do need it, the uasniffer library makes server-side browser sniffing extremely easy.

If this was helpful on your project, let me know.

Advertisements
 
Leave a comment

Posted by on 13 May 2011 in Geen categorie

 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: