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.


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.


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.