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.

A more advanced example stylesheet for use with Conditional-CSS can be viewed here. 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.

Conditional imports

Conditional-CSS will not only automatically expand and include any '@import' statements that it finds in your CSS (in order to reduce the number of HTTP requests), but it also makes allowances for conditional import statements. This could be used for include a number of rules for a specific browser. The following example would include one stylesheet for Mobile Safari (iPhone / iPod Touch) and a different one for other browsers:

Browser groups

It is common (and good) practice to group browsers together into various support grades. An example of this is shown by the list of browsers that we support at U4EA, where we have four different support grades for browsers:

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

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.

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

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

An example of using browser groups in Conditional-CSS:

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 Conditional-CSS to return nothing but it's default header.

  • [if {!} browser_group]

where:

  • ! - indicates negation of the statement (i.e. NOT) - optional
  • browser_group - states which browser group the statement targets
    • 'cssA' - A grade browsers

How browsers are detected

By default browsers are detected by Conditional-CSS and the corresponding stylesheet then processed by reading the user agent string of the browser. This makes installation and integration of Conditional-CSS 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.

Setting browser via HTTP GET variables

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 Conditional-CSS's ability to accept browser information using GET variables. Conditional-CSS accepts two different GET variables:

  • b - the browser name
  • v - the browser version (optional)

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:

Using static CSS files

The idea of using Conditional-CSS 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 Conditional-CSS 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 Conditional-CSS, however the command line options are identical for the C version):

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.

Enjoy using Conditional-CSS!

Reference

Quick reference for Conditional-CSS commands.

Conditional statements

  • [if {!} browser]
  • [if {!} browser version]
  • [if {!} condition browser version]

Browser names

  • IE - Internet Explorer
  • Gecko - Gecko based browsers (Firefox, Camino etc)
  • Webkit - Webkit based browsers (Safari, Shiira etc)
  • 'SafMob' - Mobile Safari (iPhone / iPod Touch)
  • Opera - Opera's browser
  • IEMac - Internet Explorer for the Mac
  • Konq - Konqueror
  • IEmob - IE mobile
  • PSP - Playstation Portable
  • NetF - Net Front

Conditional operators

  • lt - Less than
  • lte - Less than or equal to
  • eq - Equal to
  • gte - Greater than or equal to
  • gt - Greater then

Usage reference

PHP

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:

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.