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:
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:
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:
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:
Use the compiler on the left 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 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.