]> Conditional CSS

Documenta Rudolphina

Browser Detection with XSLT (Version 1.01)

Manfred Staudinger, Vienna (February 2009)

New: Selecting browser specific elements with XSLT (Version 2.0)

By adding an XSLT stylesheet to your XHTML you may select link and style elements to be included or excluded per browser - even with Javascript disabled (for more see below). Demo:

The color of this box will change on different browsers. Characters in parenthesis are not part of the tokens.

IE 6, IE
IE 7, IE
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)
Firefox 3, FF 3, Firefox, Gecko 1.9, SeaMonkey 2, SeaMonkey, Camino 2, Camino, Epiphany 2.22, Epiphany, Minefield (3.0)
Safari 1 (1.3+), Safari 2 (2.0.2+), Safari
Safari 3, Safari
Opera 9, Opera
Opera 9.50, Opera
X-Smiles
Unknown browser
Error: no XSL-transformation!

Prerequisites

Get the c-cond-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 definition just before the end of the DOCTYPE.

Selection

To include a link or a style 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 link or style 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. The best, you don't need anymore to include Microsoft proprietary CC's for selecting CSS in your HTML!

Link and style elements without a dr:select attribute are considered common stylesheets which every browser will see. They will remain unchanged, as any other HTML element. Only the dr:select attributes will be nullified.

Valid XHTML 1.1

For IE right-click and create a new window or a new tab!