Introduction

Undoubtedly every web-designer and developer who as made any attempt to use CSS will have found a situation where different web-browsers require different style statements. This irritation is due to the varying degree of completeness of the CSS implementation across browsers and browser versions. Conditional-CSS is a solution to this problem, taking the idea of the conditional comment syntax from Internet Explorer and placing it inline with your CSS statements.

Features of Conditional-CSS include:

• Target CSS to any web-browser
• Streamline maintenance of your CSS files
• Optimise your CSS
• Work around those annoying little CSS bugs
• Automatic expansion and inclusion of @import statements
• It's free!

Get started now! Use the following form to compile and download a customised Conditional-CSS program which you can start using immediately. Once the download is complete, simply put the program in the same directory as your CSS files on your web-server and load Conditional-CSS in your web-browser:

Basic usage

The main use of Conditional-CSS is to be able to indicate if a CSS statement should be sent to a particular browser or not. Of course you won't wish to do this often, but it is exceptionally useful when you do need to target a browser. A very wide range of web browsers can be supported in this way, as can be seen by the list that we support at U4EA.

Any CSS statement or block can be prefixed by a conditional statement, of which there are three basic types:

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

where:

• ! - indicates negation of the statement (i.e. NOT) - optional
• browser - states which browser the statement targets
  • 'IE' - Internet Explorer
  • 'Gecko' - Gecko based browsers (Firefox, Camino etc)
  • 'Webkit' - Webkit based browsers (Safari, Shiira etc)
  • 'Opera' - Opera's browser
  • 'IEMac' - Internet Explorer for the Mac
  • 'Konq' - Konqueror
  • 'IEmob' - IE mobile
  • 'PSP' - Playstation Portable
  • 'NetF' - Net Front
• version - which version of the browser in question should be considered
• condition - arithmetic operator
  • lt - Less than
  • lte - Less than or equal to
  • eq - Equal to
  • gte - Greater than or equal to
  • gt - Greater then

A few conditional statement examples:

As a more practical example consider a div of class box with width and padding. Let's also say that it needs to work in IE 5 (I realise that most people have dropped IE5 support now, but this is a classic example). The IE 5 box model is non-standard, so here is how you might get around it using Conditional-CSS:

As you can see Conditional-CSS allows you to maintain a single CSS file, rather than multiple files, as would be needed when using IE's conditional comments. This helps streamline maintenance, and also makes the code a lot clearer to editors.

Further to this, one important feature of Conditional-CSS is that when it finds an @import CSS statement, it will automatically open and insert the imported file. This reduces the load time of your page, as the browser only needs to make one HTTP request for your CSS files.

Although your conditional CSS statements will most likely be targeted to IE of various versions, Conditional-CSS is exceptionally useful when you come across a CSS bug in other browsers, which can often be hard to fix (and fixes typically use Javascript). Examples include lack of 'display: inline-block' support in Firefox 2 and background-image bugs in Safari 2. These have been fixed in the latest versions of these browsers, but backwards compatibility is important while these browsers have significant market share.

Here is a more complete example:

• View the demo in your browser
• View the original CSS
• View the parsed CSS

The following image shows how the page renders in IE7, Safari 3, Firefox 2 and Opera 9.

Note that this example is not particularly practical for deployment in a production environment as you will likely want to keep the layout similar across browsers and use Conditional-CSS only to fix CSS rendering bugs. However, it does give a good example of how different CSS can be targeted at different browsers.

Further information, targeting browser groups and more complex conditional expressions are discussed in detail in the accompanying technical reflection to Conditional-CSS.

Installation

Conditional-CSS is available in two different formats, both of which share exactly the same features, and parse the conditional statements in your CSS files in the same way. Which format you will wish to use will depend on your server, and the ease of installation. The two formats are:

• PHP - Perfect for installing Conditional-CSS on your server very quickly and easily.
• C binary - A little more involved to install, but much faster than the PHP version and can be used as an interpreter (see below for an explication).

PHP version

If you wish to try out Conditional-CSS, or only have a couple of CSS files on your site, the PHP version is perfect for you. You will require PHP 4.4 or PHP 5+ to be available on your server. To install:

1. Use the 'Online Conditional-CSS compiler' at the top of this page to download a customised version of Conditional-CSS, by entering the name(s) of your CSS files.
2. Place the downloaded file (c-css.php) on your server in the same location as your CSS files.
3. Load the 'c-css.php' file you uploaded in your web-browser and admire the parsed CSS.
4. Include the 'c-css.php' file as you would any CSS file on your web-pages using: @import "{path_to_}/c-css.php"; (or similar).

C version

The C version was developed because it is considerably faster than the PHP version and it doesn't require the overhead of the PHP libraries. Therefore, if you don't have PHP on your server, you will be able to use this version. In it's basic form it's installation is similar to the PHP version:

1. Use the 'Online Conditional-CSS compiler' at the top of this page to download a customised version of Conditional-CSS, by entering the name(s) of your CSS files and selecting the 'C' version from the drop down menu.
2. Place the downloaded file (c-css) on your server in the same location as your CSS files.
3. Ensure you give 'c-css' execute permissions (755) as it will be run as a CGI script.
4. Include the 'c-css' file as you would any CSS file on your web-pages using: @import "{path_to_}/c-css"; (or similar).

Note that if you wish to use the C version of Conditional-CSS on any platform other than Linux x86, then you can download the source code at the bottom of this page and compile it using any C compiler. The source is very portable, and will run on a huge range of hardware and operating systems.

The biggest advantage of the C version of Conditional-CSS is not, however, it's speed, but rather than can also be used as an interpreter. What this means is that if you install the Conditional-CSS binary file on your server as you would any normal program (in /usr/bin/ for example) then you can include a single (hash-bang) line at the top of your CSS files and Conditional-CSS will parse your file for you. This makes system wide installation very easy. Think of using Conditional-CSS as you would do a scripting language such as Perl or Bash.

An example CSS file using c-css as an interpreter is shown below:

Note that the i switch (-i) tells Conditional-CSS to output the headers required to tell the web-browser that it is about to receive CSS. For more detailed information about command line options, please refer to the detailed and technical information page on this site.

If you use this method, you must ensure that your CSS file can be executed as a CGI program. Do this by first added execute permissions to the file (755). You may also have to tell your HTTP server to run the file as a program. You do this in Apache using an '.htaccess' file, similar to the one shown below (alternative methods are available on other HTTP servers):

Support and future work

Conditional-CSS is a reasonably solid piece of software, however it is of course possible that you will stumble across bugs in it. If you do so, please let me know so I can fix them in future releases. Please also indicate which version of Conditional-CSS you are using.

My plans for future revisions of Conditional-CSS include support for changing the characters which envelope the conditional statement (square brackets might not suit everyone) and allowing for multiple delimiting characters. I'll also be adding checks for different browsers as people tell me what browsers they would like to detect.

If you have any suggestions for features or enhancements in Conditional-CSS please get in touch. Please feel free to drop me a line even if you simply find it useful. It would be great to hear from you!

Credits

Conditional-CSS is based on one of my projects developed at U4EA Technologies. U4EA have kindly allowed me to release Conditional-CSS as open source software on this site. Special thanks go to Graham Willmott for reviewing the project, and to Sean Pedley for sharing his expertise with me. Without the help of everyone at U4EA Conditional-CSS would not have been possible - so thank you to all!

Download and license

Conditional-CSS is open source software, freely available for you to use and modify, under the terms of the U4EA Common Development and Distribution License (U4EA CDDL). The source files can be downloaded using the following link, or alternatively use the online compiler at the top of this page to generate the PHP or binary file you require:

• Download the Conditional-CSS source from it's own web-site

Links and more information

• Conditional-CSS's own web-site.
• Detailed and technical information.
• Example list of browser support using Conditional-CSS.
• Conditional-CSS demo.
• Get in touch with me.