Browser Detection with XSLT

Manfred Staudinger, Vienna (May 2008)

Beyond Conditional Comments and JavaScript

By adding an XSLT stylesheet to your XHTML you may select any element to be included or excluded per browser - even with JavaScript disabled. Obvious canditates for being selected are the <style>, <link> and <script> elements.

For the categories offered, XSLT browser detection is more reliable and standards conformant than CSS hacks or JavaScript browser detection. But its only to complement not to substitute well known methods, like JavaScripts object detection and CSS's progressive enhancement method, which both work at a much finer granularity.
Demo:

Browser Selection:

If SVG is enabled the shape becomes an ellipse, otherwise a square; the color will change for different browsers.

IE 6, IE, SVG (only via ASV)
IE 7, IE, SVG (only via ASV)
IE 8, IE (beware: IE 8 beta, 8.0.6001.17184, incorrect)
Firefox 1 (1.0+), FF 1, Firefox, Gecko 1.7, Mozilla 1.7, Camino 0.8, Camino, Netscape (7, 8)
Firefox 2 (1.5+, 2.0+), FF 2, Firefox, Gecko 1.8, SeaMonkey 1, SeaMonkey, Camino 1, Camino, Epiphany 2.14, Epiphany 2.20, Epiphany, Flock (1.0.9, 1.1.2), K-Meleon (1.1.4), Kazehakase (0.4.3, 0.5.2), Netscape (9), SVG
Firefox 3, FF 3, Firefox, Gecko 1.9, SeaMonkey 2, SeaMonkey, Camino 2, Camino, Epiphany 2.22, Epiphany, Minefield (3.0), SVG
Safari 1 (1.3+), Safari 2 (2.0.2+), Safari
Safari 3 (SVG for 3.0?), Safari, SVG
Opera 9, Opera, SVG
Opera 9.50, Opera, SVG
X-Smiles
Unknown browser
Error: no XSL-transformation!

Prerequisites

Get the "cond-svg-html.xsl" stylesheet, add a processing instruction to your XHTML and declare the namespace prefix "dr" on the head element. Optionally, if you want to easily use the W3C Validator, add the attribute definitions just before the end of the DOCTYPE.

Selection

To include a html or any other element for one of the above choices you use the dr:select attribute and specify one or more tokens as a comma separated list. For example dr:select="Firefox, Safari 3" will cause the element to be included for any Firefox and for Safari 3. If you specify more than one token, each of which constitutes a positive selection, you may use any combination of tokens from the non-IE browsers plus the token "IE".

To select a specific IE only one token in the dr:select attribute is allowed, because it is directly used in constructing a Conditional Comment (CC). These are constructed on the fly only if the current browser is actually an IE. Any valid CC expression is allowed, so you can specify for example dr:select="lte IE 7" (positive selection) or dr:select="!IE 6" (negative selection). To clarify, a positive CC selection will allow only the IE's specified to read the CSS, and a negative CC will exclude them from seeing it.

Elements with a dr:select attribute will be copied for the appropriate browser, but without that attribute. Other elements remain unchanged.

Inline SVG and ASV

To take full advantage of this approach, you should consider to delete all the various style attributes and move the styles to one common style element.

While native SVG implementations do support SVG styles anywhere in the CSS cascade, specfically in external files designated by <link> elements, ASV does support external CSS files only via an XML stylesheet, which is not available in case of inline SVG.

If ASV is detected (currently checked with JScript for IE only), the necessary object element and the import PI are created in the head section. Further all the style elements applicable for the browser are copied into newly created <svg:style> elements within the <svg:defs>.

The namspace prefix "svg" which is used for all the SVG elements could be eliminated by declaring a default namspace. But ASV depends on the prefix, not on the namespace.

From the demo it is obvious that ASV supports advanced CSS selectors while IE 6 does not.