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.
The main use of Conditional-CSS is to be able to indicate if a particular 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:
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.
Here is a more complete example:
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 advanced page for Conditional-CSS.
Conditional-CSS is available in three 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 available formats are:
If you wish to try out Conditional-CSS, or only have a couple of CSS files on your site, then the PHP version is perfect for you. You will require PHP 4 or PHP 5+ to be available on your server. To install:
The C# version of Conditional-CSS provides all the functionality, features and usefulness of the PHP and C version on the Windows platform, and is perfect for use on IIS or Apache with Mono. There are two options available for installing Conditional-CSS in a .Net environment:
The C# ASHX version of Conditional-CSS is perfect if you wish to try out Conditional-CSS in a .Net environment, or only have a couple of CSS files on your site. To install:
Like the C version, the C# CGI version can be run either on the command line (to pre-parse files, which can then be served up using IE conditional comments) or as an interpreter (CGI process). This has a significant speed advantage over the ASHX version, and it is recommended that this version be used for high volume web-sites. To download Conditional-CSS for Windows as a CGI program:
Using Conditional-CSS as an interpreter is exceptionally useful when you want to use multiple Conditional-CSS files across one or many sites. In this way you need to install only one program, and can select an extension (.ccss typically) which will involve the program and have the specified filed parsed for the user's browser on-the-fly. To illustrate: the user's browser would request '/media/css/site.ccss' (via an @import statement) which is a standard CSS file, but with conditional comments inline. IIS would invoke Conditional-CSS which will parse the file, and send the required CSS back to the user.
To install Conditional-CSS on IIS as a CGI interpreter:
Note that Conditional-CSS reads environment variables (as you would expect a CGI program to do) which can require additional consideration with security settings. If you receive an uncaught security warning when trying to load a .ccss file, you might need to take this into account. In Windows, ensure that the downloaded program (c-css.exe) is 'Unblocked' - right click -> 'Properties'.
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:
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 advanced 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):
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!
Quick reference for Conditional-CSS commands.
Use the online compiler 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:
Generate the binary using the online compiler, 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.
There are two options available for the C# version of Conditional-CSS, the first is to install it as an ASHX handler, which is very extremely simply to do, and the second is to install it as a CGI program and use it as an interpreter. In both cases use the online compiler to generate the file required and follow the instructions at the bottom of this page to complete the installation.