One of the most reoccurring frustrations in web-development is CSS bugs in the various web-browsers. Conditional-CSS addresses this by allowing you to write maintainable CSS with conditional logic to target specific CSS at both individual browsers and groups of browsers.

Note that Conditional-CSS now has it's own web-site and is available for PHP, C# and C.

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:

Online Conditional-CSS compiler

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:

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

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.