The power of Conditional-CSS is in it's simplicity, but also in it's flexibility to cope with almost any situation in which you would need to send different CSS information to different browsers. In this article I consider some of its more advanced and technical aspects.

Introduction

Conditional-CSS was developed out of the desire to overcome CSS rendering bugs in a wide range of browsers, ensuring as many visitors as possible see your site's design correctly. The core idea is based on the method of Conditional Comments found in Internet Explorer, extended to include other browsers, and to move the conditional statements inline with your CSS definitions.

Conditional-CSS isn't really all that interested in which browser the user is using, but rather what rendering engine the user's browser utilises. This is why Conditional-CSS uses 'Gecko' rather than the well known Firefox as one of it's browser conditions. Likewise for Safari 'Webkit' is used. This allows other browsers using the same rendering engines to receive the same targeted CSS. An exception to this rule is made for IE (rather than using 'Trident') since this is what the IE conditional comments use and Trident isn't particuarly well known. Similarly for Opera, since only the Opera browser uses it's Presto rendering engine, 'Opera' is used.

It should be noted that if all browsers were to correctly implement the CSS specifications released by the W3C there would be no need for Conditional-CSS. However, CSS bugs are a fact of life for web-developers and are often extremely frustrating. Conditional-CSS offers us a simple solution to overcome these problems.

Advanced conditional statements

Conditional blocks

A typical conditional statement will apply to only a single CSS rule. However, it is also possible to use conditions on entire CSS blocks, such that a block might only be used for certain browsers. In the following example the CSS block is used only for IE browsers.

// Conditional block example

[if IE] .box {
	width: 500px;
	padding: 100px 0;
}
</pre>

<p>A more advanced example stylesheet for use with <i>Conditional-CSS</i> can be <a href="http://www.sprymedia.co.uk/conditional-css/media/css/advanced.css">viewed here</a>. This demonstrates various methods of how to use conditional statements. Note also that it shows that no white space is required between the conditional statement and the CSS statement.</p>

<h2>Browser groups</h2>

<p>It is common (and good) practice to group browsers together into various support grades. An example of this is shown by the <a href="/conditional-css/browsers">list of browsers</a> that we support at U4EA, where we have four different support grades for browsers:</p>

<ul>
	<li><b>A grade</b>: First class support with all widgets</li>
	<li><b>C grade</b>: Core support, with basic display information</li>
	<li><b>X grade</b>: CSS blocked from the browser, instead relying on HTML rendering</li>
	<li><b>U grade</b>: Unsupported. Will get the same CSS as C grade browsers</li>
</ul>

<p>There will be instances where you want all A grade browsers to receive certain CSS, but ensure that C grade and lower browsers don't see this. An example of this is that A grade browsers might format a UL list into tabs, while all other browsers will simply show a standard bullet point list.</p>

<p><i>Conditional-CSS</i> allows you to do this by defining a set of browsers to be in a particular group, and then using the <i>browser</i> field in a standard conditional statement to match the browser group. <i>Conditional-CSS</i> has a standard set of browser groups built-in (you can, of course, define your own if you wish to):</p>

<ul>
	<li>
		'cssA' - A grade CSS support
		<ul>
			<li>IE 6+</li>
			<li>Gecko 1.0+ (Firefox, Camino etc)</li>
			<li>Webkit 312+ (Safari 1.3+)</li>
			<li>Opera 7+</li>
			<li>Lonqueror 3.3+</li>
		</ul>
	</li>
	<li>
		'cssX' - X grade CSS support
		<ul>
			<li>IE 4 and below</li>
			<li>IE Mac 4.5 and below</li>
		</ul>
	</li>
</ul>

<p>An example of using browser groups in <i>Conditional-CSS</i>:</p>

<textarea class="CSS" rows="1" cols="60" name="code">// Conditional-CSS browser groups example

[if cssA] ul.li {
	display: block;
	margin-left: 5px;
	width: 50px;
	/* etc */
}
</pre>

<p>As you can see the syntax of a conditional statement with a browser group is formatted in the same way as a standard conditional statement. Note that 'cssX' is a special browser group which causes <i>Conditional-CSS</i> to return nothing but it's default header.</p>

<ul>
	 <li>[if {!} browser_group]</li>
</ul>

<p>where:</p>

<ul class="lines">
	<li>! - indicates negation of the statement (i.e. NOT) - optional</li>
	<li>
		browser_group - states which browser group the statement targets
		<ul>
			<li>'cssA' - A grade browsers</li>
		</ul>
	</li>
</ul>

<h1>How browsers are detected</h1>

<p>By default browsers are detected by <i>Conditional-CSS</i> and the corresponding stylesheet then processed by reading the user agent string of the browser. This makes installation and integration of <i>Conditional-CSS</i> into your site very simple as all you have to do is upload the program and edit your CSS import statement in your HTML. User agent detection is an effective method of detecting which browser and version should be used, however it's one draw back is that a few people change the user agent of their browser to appear to be something else (usually IE). Under these circumstances the end user will get the wrong CSS for their browser. My view on this is that if you state your browser is IE, you should expect to get what IE would see.</p>

<h2>Setting browser via HTTP GET variables</h2>

<p>Having said that it is possible to reliability ensure that IE and IE only will get IE targeted CSS. To do this we use a combination of IE's conditional comments and <i>Conditional-CSS</i>'s ability to accept browser information using GET variables. <i>Conditional-CSS</i> accepts two different GET variables:</p>

<ul>
	<li>b - the browser name</li>
	<li>v - the browser version (optional)</li>
</ul>

<p>The following example shows the HTML with conditional comment statements required to ensure that IE6 and IE7 will receive their targeted CSS and all other browsers will not:</p>

<pre class="brush: html;">
  <style type="text/css">@import '/media/css/c-css.php?b=nonIE';</style>



</pre>

<h1><a name="static"></a>Using static CSS files</h1>

<p>The idea of using <i>Conditional-CSS</i> to generate a custom CSS file for each browser appears fine, it is only really suitable if you manage a relatively low volume web-site, since the program must be run on every request for the stylesheet. For medium to high volume site, this really isn't suitable, particularly when there are a limited number of files which will be created. Therefore <i>Conditional-CSS</i> has the ability to accept command line arguments specifying which browser and version (optional) should be considered and then output the resulting CSS to stdout. The following script could be used to generate CSS files for IE 6, 7 and non-IE browsers (note that the script describes the PHP version of <i>Conditional-CSS</i>, however the command line options are identical for the C version):</p>

<textarea class="CSS" rows="1" cols="60" name="code">#!/bin/sh

php -q c-css.php IE 7 > ie7.css
php -q c-css.php IE 6 > ie6.css
php -q c-css.php > nonie.css
</pre>

<p>It is fair to say that this is the most likely combination of stylesheets you will need and therefore the following HTML with conditional comments can be employed with the above script to pull the required CSS file.</p>

<pre class="brush: html;">
  <style type="text/css">@import '/media/css/nonie.css';</style>



</pre>

<h1>Download and license</h1>

<p><i>Conditional-CSS</i> is open source software, freely available for you to use and modify, under the terms of the <a href="http://sprymedia.co.uk/license/u4ea_cddl">U4EA Common Development and Distribution License</a> (CDDL).</p>

<ul>
	<li><a href="/conditional-css/media/src/Conditional-CSS.zip">Download the <i>Conditional-CSS source</i>.</a></li>
</ul>

<p>Enjoy using <i>Conditional-CSS</i>!</p>

</div>
				
				
				<div class="column_1_3r">
						<div class="center"><img src="/conditional-css/media/images/Conditional-CSS.jpg" alt="Article image" style="margin-top: 10px;"></div><h1><a name="ref_conditions"></a>Conditions reference</h1>

Quick reference for Conditional-CSS commands.

<h2>Conditional statements</h2>
<ul class="lines">
	 <li>[if {!} browser]</li>
	 <li>[if {!} browser version]</li>
	 <li>[if {!} condition browser version]</li>
</ul>

<h2>Browser names</h2>
<ul class="lines">
	<li>IE - Internet Explorer</li>
	<li>Gecko - Gecko based browsers (Firefox, Camino etc)</li>
	<li>Webkit - Webkit based browsers (Safari, Shiira etc)</li>
	<li>Opera - Opera's browser</li>
	<li>IEMac - Internet Explorer for the Mac</li>
	<li>Konq - Konqueror</li>
	<li>IEmob - IE mobile</li>
	<li>PSP - Playstation Portable</li>
	<li>NetF - Net Front</li>
</ul>

<h2>Conditional operators</h2>
<ul class="lines">
	<li>lt - Less than</li>
	<li>lte - Less than or equal to</li>
	<li>eq - Equal to</li>
	<li>gte - Greater than or equal to</li>
	<li>gt - Greater then</li>
</ul>

<h1><a name="ref_usage"></a>Usage reference</h1>

<p>Use the compiler on the left to generate the required PHP file and save it to your web-server. Then import the PHP file as you would a normal CSS file:</p>

<textarea class="CSS" rows="1" cols="60" name="code">// Conditional-CSS Import
@import "/media/css/c-css.php";

C

Generate the binary using the compiler on the left, or by downloading the source and compiling it yourself. To use an interpreter, leave the files list blank, and include a hash-bang line to the interpreter at the top of the CSS file:

Set your CSS file to be executable as a CGI file (see the detailed instructions for how to do this). Then import your CSS file as you normally would.