Tuesday, January 27th, 2009

Browser Detection with XSLT

Category: Tip

This is a fun little hack by Manfred Staudinger.

Thanks to select="system-property('xsl:vendor')", he has a style sheet that allows you to show items depending on the browser:

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.

You could do this when JavaScript isn’t enabled for example…. although I am not sure how practical it actually is :)

Posted by Dion Almaer at 5:50 am

4.3 rating from 20 votes


Comments feed TrackBack URI

Works great in FF and IE6, but I get an Invalid Request error in IE7 (7.0.5730.13)

Comment by OndraM — January 27, 2009

I’ve used this property quite a few times over the years but its only practical if people use XML + XSL to generate their web pages, and in my experience less than a handful bother. Whether its a lack of understanding or a lack of opportunity I don’t know.

Comment by TNO — January 27, 2009

Could someone explain what this really is? How and what could we use this for?

Comment by jaysmith — January 27, 2009

As you probably already know, XSL + XML can be used as a client side markup preprocessor (I can create a webpage with a single tag called <calendar/> and transform it into a full blown table of all the months or whatever at runtime across my pages). Part of the standard XSL library includes a function to determine what type of engine is transforming the syntax. Using this you can determine before render time what browser is viewing the page and adjust accordingly.

Comment by TNO — January 27, 2009

Does anyone know of any major websites using XSLT clientside besides the World or Warcraft one?

Comment by zachleat — January 27, 2009

WOW (and i dont mean world of warcraft). The xslt trick above demonstrates a hidden temple. I’ve written alot of xslt but never in the client because of cloudy browser support.

I did’nt know ie6 could run this. Amazing. So the only thing not really working in clientside xslt would be the importance of “import” and “include”?

Comment by jaysmith — January 27, 2009

In IE6+ you can rely on XPath/XSL 1.0 support, but not much more than that. you have to get creative if things get complex. (But hey, at least its Turing Complete). Plus I’m pretty sure IE6 supports import and include. Now, whether its bugged or not is another question…

Comment by TNO — January 27, 2009


Diablo 3 site is using XML + XSLT and it is pretty slick.

Another thing thats pretty interesting is that you can do the transformation serverside with Apache if you compile modxslt2 found here: http://www.mod-xslt2.com/

Comment by dr01d — January 27, 2009

don’t you mean @zachleat?

Comment by TNO — January 27, 2009

Brilliant! Now to do it in javascript instead…

Comment by oopstudios — January 28, 2009

By the way, note that Manfred is serving the page as “text/xml”, which is deprecated, whereas the Diablo3 site is served as “application/xhtml+xml”.

Comment by davidlantner — January 28, 2009

Probably because IE and older Opera puke on that mimetype

Comment by TNO — January 28, 2009

I’ve updated the demo to run with IE 7 too and at the same time moved to XHTML 1.1. Do you see any other problems?
Can you give more details? As far as I can see, the page is served as “application/xml” because IE does _not_ allow “application/xhtml+xml”
_my_ website has about 24.000 pages, don’t know if it qualifies as “major”.

Comment by MSt — February 3, 2009

Leave a comment

You must be logged in to post a comment.