Conditional-CSS

• Usage
• Advanced
• Download
• Contact

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.

Basic usage

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:

• [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, Chrome, 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
• 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:

// Conditional-CSS syntax examples [if IE] - Used if the browser is IE [if ! Opera] - Used if the browser is not Opera [if IE 5] - Used if browser is IE 5 [if lte IE 6] - Used if the browser is IE 6 or less (IE 5, IE 4 etc) [if ! gt IE 6] - Same effect as the previous statement, if not greater than IE 6

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:

// Conditional-CSS box example div.box { width: 400px; [if IE 5] width: 600px; padding: 0 100px; }

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 advanced page for Conditional-CSS.

Installation

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:

• PHP - Perfect for installing Conditional-CSS on your server very quickly and easily.
• C# - Suitable for use under .Net (IIS / Mono) this version will run natively on Windows as either an ASHX handler, as a CGI interpreter or on the CLI.
• 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, then the PHP version is perfect for you. You will require PHP 4 or PHP 5+ to be available on your server. To install:

1. Use the online Conditional-CSS compiler 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 (for Windows / .Net / Mono)

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:

• ASHX handler - very simple to install and use
• CGI interpriter - a little more tricky to install but perfect for site wide installations

ASHX handler

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:

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

CGI program

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:

1. Use the online Conditional-CSS compiler to download a customised version of Conditional-CSS, by entering the name(s) of your CSS files and selecting the 'C#' version.
2. Use the CLI to run Conditional-CSS and parse CSS files, or follow the instructions below to install as an interpreter.

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:

1. Use the online Conditional-CSS compiler to download a customised version of Conditional-CSS. Select the C# version and leave the file names blank. Add copyright and author information if you wish.
2. Open the 'IIS Manager' from the Start menu.
3. Select the 'Handler Mappings' option for either a specific web-site or as a global setting, and add a new mapping ('Add Script Handler...').
4. In the dialogue box which appears in the request path enter the extension that you wish to use for Conditional-CSS files (*.ccss is recommenced and typical).
5. In the 'Executable' field browse to the location where you downloaded and stored 'c-css.exe' and select this file.
6. Click okay!
7. Create your Conditional-CSS file and call is {something}.ccss
8. Load this file in your web-browser though your web-server and that's that!

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'.

C version (for Linux / Unix / Mac OS X

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 to download a customised version of Conditional-CSS, by entering the name(s) of your CSS files and selecting the 'C' version.
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:

#!/usr/bin/c-css -i /* * CSS file */ html, body { margin: 0; padding: 0; } //etc

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):

Options +ExecCGI AddHandler cgi-script .css

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!

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 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:

// Conditional-CSS Import @import "/media/css/c-css.php";

C

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:

#!/usr/bin/c-css -i // Normal CSS file body, html { padding: 0; margin: 0; } // etc

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.

C#

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.