Browser sniffing is one area where Javascript is in widespread use. To minimize the Javascript overhead that your users must download, you can substitute server-side or PHP and JSP sniffing instead. BrowserHawk from cyScape uses server-side browser sniffing or hybrid sniffing to detect a wide variety of parameters, including Flash, screen size, connection speed, cookies, and browser and software versions (see the image below, "The BrowserHawk home page, which sniffs your browser environment variables").

Sniffing with BrowserHawk

Here is some sample code that shows how BrowserHawk is enabled in a page and some sniffed parameters:

<%
// First import the com.cyscape.browserhawk namespace
%>

<%@ page import = "com.cyscape.browserhawk.*" %>

<%
// Now we get an immutable (unchangeable) instance of the browser object which
// represents the "basic" properties this browser supports.
%>

<% BrowserInfo browser = BrowserHawk.getBrowserInfo(request); %>

<%
// At this point, our browser object contains all the basic browser capability
// information for the current visitor. Next, display this information to the screen
%>

Your browser is: <%= browser.getBrowser() %> <%= browser.getFullversion() %><P>

Your platform is: <%= browser.getPlatform() %><P>
Browser major version: <%= browser.getMajorver() %><P>
Browser minor version: <%= browser.getMinorver() %><P>
Container* browser: <%= browser.getContainerBrowser() %><P>

Container version: <%= browser.getContainerVersion() %><P>
Container full version: <%= browser.getContainerFullversion() %><P>
Supports AJAX? <%= browser.getXMLHttpRequest() %><P>
Supports ActiveX controls? <%= browser.getActiveXControls() %><P>
Browser data file version: <%= browser.getBDDVersion() %>, dated: <%= browser.
getBDDDate() %><P>

BrowserHawk version in use: <%= BrowserHawk.getVersion() %><P>

The BrowserHawk home page, which sniffs your browser environment variables



For extended properties that can change with each session, you use the following code:

<%
  // First we create the ExtendedOptions object.  This object is used to
  // set various preferences and options, such as selecting which 
  // extended properties we want tested and related testing parameters.
  ExtendedOptions options = new ExtendedOptions();

  // Now we tell BrowserHawk which tests we want it to perform on the
  // browser. If there are other settings you want to check as well, you can
  // just add them to this list.   See the ExtendedOptions class in the
  // BrowserHawk documentation for more information.
 %>
options.addProperties("PersistentCookies, SessionCookies, JavascriptEnabled, Width,
Height, WidthAvail, HeightAvail, Plugin_Flash, Broadband");

Session cookies enabled? <%= extBrowser.getSessionCookies() %><p>
Persistent cookies enabled? <%= extBrowser.getPersistentCookies() %><p>

Javascript enabled? <%= extBrowser.getJavascriptEnabled() %><p>
Screen resolution: <%= extBrowser.getWidth() %> x <%= extBrowser.getHeight() %><p>
Available browser window size: <%= extBrowser.getWidthAvail() %> x <%= extBrowser.
getHeightAvail() %><p>

Flash plug-in version installed: <%= extBrowser.getPluginFlash() %><p>
Broadband connection? <%= extBrowser.getBroadband() %><p>

You can also cache these results and get more granular data on the connection speed of the user, version numbers, and capabilities. Once you have sniffed the user's browser, you can deliver conditional content based on these variables.

XSSI browser sniffing

Using conditional server-side includes (XSSIs), you can create environment variables that closely mimic Javascript-based sniffing. For example, this common Javascript filter:

IS_IE = (document.all) ? true : false;
IS_MAC = (navigator.appVersion.indexOf(" Mac") != -1);
IS_OPERA = (navigator.userAgent.indexOf(" Opera") != -1);
IS_OPERAMAC = IS_OPERA && IS_MAC;

becomes this XSSI equivalent:

<!--#if expr="$(HTTP_USER_AGENT) = /MSIE [4-9]//" --> 
    <!--#set var="isIE" value="true" -->

<!--#endif -->
<!--#if expr="$(HTTP_USER_AGENT) = /Mac/" --> 
    <!--#set var="isMAC " value="true" -->
<!--#endif -->
<!--#if expr="$(HTTP_USER_AGENT) = /Opera/" --> 
    <!--#set var="isOPERA" value="true" -->
<!--#endif -->
<!--#if expr="(${isOPERA} && ${isMAC})/" --> 
    <!--#set var="isOPERAMAC" value="true" -->

<!--#endif -->

Now you can use these XSSI variables to conditionally include code within your XSSI includes without the need for Javascript:

<!--#if expr="${isIE}" -->
    ie.js
<!--#elif expr="${isOPERAMAC}" -->
    operamac.js 
<!--#elif expr="${isOPERA}" -->
    opera.js
...
<!--#endif -->

It is faster to set environment variables at the server by configuring your httpd.conf file using BrowserMatchNoCase. For example:

BrowserMatchNoCase "MSIE [4-9]" isIE
BrowserMatchNoCase Mac isMAC
BrowserMatchNoCase Opera isOPERA