<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet href="cond-css.xsl" type="text/xsl"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
	[<!ATTLIST link dr:select CDATA #IMPLIED><!ATTLIST style dr:select CDATA #IMPLIED>]>
<html xmlns="http://www.w3.org/1999/xhtml">
	<head xmlns:dr="http://documenta.rudolphina.org/">
		<title>Conditional CSS</title>
		<style type="text/css">
		body {
			margin: 30px;
		}
		div {
			width: 100px;
			height: 100px;
			border: 1px solid black;
		}
		dt {
			margin-right: 8px;
			width: 48px;
			height: 16px;
			border: none;
			float: left;
		}
		dd {
			padding-left: 20px;
		}
		p.validator img {
			border: 0;
		}
		</style>
		<style type="text/css" dr:select="IE 6">div {background-color: #6666CC}</style>
		<style type="text/css" dr:select="IE 7">div {background-color: #0099FF}</style>
		<style type="text/css" dr:select="IE 8">div {background-color: #66CCFF}</style>
		<style type="text/css" dr:select="FF 1">div {background-color: #FF5F49}</style>
		<style type="text/css" dr:select="FF 2">div {background-color: #FFBC2F}</style>
		<style type="text/css" dr:select="FF 3">div {background-color: #FFED0F}</style>
		<style type="text/css" dr:select="Safari 2">div {background-color: #3CB371}</style>
		<style type="text/css" dr:select="Safari 3">div {background-color: #90DD90}</style>
		<style type="text/css" dr:select="Opera 9">div {background-color: #CC33FF}</style>
		<style type="text/css" dr:select="Opera 9.50">div {background-color: #FFCCFF}</style>
		<style type="text/css" dr:select="X-Smiles">div {background-color: #4BFFFF}</style>
		<style type="text/css" dr:select="unknown">div {background-color: white}</style>
		<style type="text/css" dr:select="error">div {background-color: black}</style>
	</head>
	<body>
		<h1>Browser Detection with XSLT</h1>
		<p>Manfred Staudinger, Vienna (April 2008)</p>
		<p>
			By adding an XSLT stylesheet to your XHTML you may <b>select link and
			style elements</b> to be included or excluded per browser - even with Javascript
			disabled (for more see below). Demo:
		</p>
		<div/>
		<p>
			The color of this box will change on different browsers. Characters in parenthesis
			are not part of the tokens.
		</p>
		<dl>
			<dt style="background-color: #6666CC"></dt><dd>IE 6, IE</dd>
			<dt style="background-color: #0099FF"></dt><dd>IE 7, IE</dd>
			<dt style="background-color: #66CCFF"></dt><dd>IE 8, IE (beware: IE 8 beta, 8.0.6001.17184, incorrect)</dd>
			<dt style="background-color: #FF5F49"></dt><dd>Firefox 1 (1.0+), FF 1, Firefox, Gecko 1.7, Mozilla 1.7, Camino 0.8, Camino, Netscape (7, 8)</dd>
			<dt style="background-color: #FFBC2F"></dt><dd>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)</dd>
			<dt style="background-color: #FFED0F"></dt><dd>Firefox 3, FF 3, Firefox, Gecko 1.9, SeaMonkey 2, SeaMonkey, Camino 2, Camino, Epiphany 2.22, Epiphany, Minefield (3.0)</dd>
			<dt style="background-color: #3CB371"></dt><dd>Safari 1 (1.3+), Safari 2 (2.0.2+), Safari</dd>
			<dt style="background-color: #90DD90"></dt><dd>Safari 3, Safari</dd>
			<dt style="background-color: #CC33FF"></dt><dd>Opera 9, Opera</dd>
			<dt style="background-color: #FFCCFF"></dt><dd>Opera 9.50, Opera</dd>
			<dt style="background-color: #4BFFFF"></dt><dd>X-Smiles</dd>
			<dt style="background-color: white; border: solid 1px black; width: 46px; height: 14px;"></dt><dd>Unknown browser<span class="cond-css-demo"></span></dd>
			<dt style="background-color: black; clear: left;"></dt><dd>Error: no XSL-transformation!</dd>
		</dl>
		<h3>Prerequisites</h3>
		<p>
			Get the <a href="c-cond-html.xsl">c-cond-html.xsl</a> 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.
		</p>
		<ul>
			<li>&lt;?xml-stylesheet href="c-cond-html.xsl" type="text/xsl"?></li>
			<li>&lt;head xmlns:dr="http://documenta.rudolphina.org/"></li>
			<li>[&lt;!ATTLIST link dr:select CDATA #IMPLIED>
				&lt;!ATTLIST style dr:select CDATA #IMPLIED>]</li>
		</ul>
		<h3>Selection</h3>
		<p>
			To include a <b>link</b> or a <b>style element</b> for one of the
			above choices you use the <b>dr:select attribute</b> 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".
		</p>
		<p>
			To select a specific IE only one token in the <b>dr:select attribute</b> 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!
		</p>
		<p>
			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 <b>dr:select attributes</b> will be nullified.
		</p>
		<p class="validator">
			<a href="http://validator.w3.org/check?uri=http%3A%2F%2Fdocumenta.rudolphina.org%2Fcond-css-demo.xml">
				<img src="http://www.w3.org/Icons/valid-xhtml10"
					alt="Valid XHTML 1.0 Strict" height="31" width="88" />
			</a>
		</p>
		<script src="http://www.google-analytics.com/ga.js" type="text/javascript"></script>
		<script type="text/javascript">
			var pageTracker = _gat._getTracker("UA-534617-5");
			pageTracker._initData();
			pageTracker._trackPageview();
		</script>
	</body>
</html>