Russell Beattie

This is kinda neat... Nokia just published a tutorial on how to target content for different browsers - by making the style sheet a dynamic jsp page. I can honestly say that I never thought of doing it this way.

Here's their code in a nutshell:

style.jsp:

<%
boolean smallbrowser = true;
String userAgent = request.getHeader("user-agent");

// Internet (Big) Browser
if ( userAgent.indexOf("Mozilla") != -1 ) {
%>
.hdr    { 
            font-style: bold;
            font-size: 30px;
            text-align: center; 
            color: yellow;
            text-decoration: blink;
        }

<% 
    // Mobile (Small) Browser
    } else { 

      if ( (userAgent.indexOf("5100") != -1) || (userAgent.indexOf("3300")!=-1)) {
        //Nokia 5100 - Series 40 browser
%>
.hdr    { text-align: center; }

<%
      } else if (userAgent.indexOf("3650") != -1) {
%>

.hdr    { 
            font-style: bold;
            font-size: larger;
            text-align: center; 
        }

<% 
      } 
    }
%>

I think it's obviously a *lot* more complex of an issue than just this simple example, but I think there's a core of a solution here which is pretty neat. My only real concern is content length. Even if you stick to the XHTML-Basic for your markup (thus working just about everywhere), the size of the document can screw up many browsers. You almost need a completely new page per device type.

Making a new custom dynamic page per phone, however, is *really* a lot of work, so shortcuts like this are definitely welcome. I'd probably use DELI or WURFL instead of just a basic User-Agent test as well. But like I said, the idea is there and it's interesting...

-Russ