Monday, August 11th, 2008

Conditional-CSS: Inline browser specific CSS

Category: CSS

Allan Jardine has created Conditional-CSS, a tool that allows a style sheet author to place IE style conditional statements inline with CSS to target multiple different browsers.

Expanding the IE conditional statement syntax we get:

  1. [if {!} browser]     or
  2.    [if {!} browser version]     or
  3.    [if {!} condition browser version]

Of course, browsers are getting better and better with their CSS rendering, but in this way those annoying little CSS bugs which always seem to crop up can be worked around. It can also make maintenance of style sheets much easier since it is no longer necessary to maintain separate ‘hack’ files for the various IE versions. For example the following block can be used to overcome some of the issues faced with the button tag:

  1. a.button_active, a.button_unactive {  
  2.      display: inline-block;  
  3.      [if lte Gecko 1.8] display: -moz-inline-stack;  
  4.      [if lte Konq 3.1] float: left;  
  5.      height: 30px;  
  6.      [if IE 5.0] margin-top: -1px;  
  8.      text-decoration: none;  
  9.      outline: none;  
  10.      [if IE] text-decoration: expression(hideFocus='true');  
  11. }

Conditional-CSS is an open source project and is currently available in three different source languages: PHP, C and C#, all with identical feature sets. It can readily be deployed on Apache, IIS or any other web-server with a CGI interface. Conditional-CSS can also be run from the command-line such that a style sheet with conditional statements in it can be pre-parsed for IE and included using standard conditional comments in the HTML.

Allan has generators for PHP, C, and C#. You upload the CSS and it spits out what you need. There are also advanced usage.

Posted by Dion Almaer at 7:25 am
Comments Off on Conditional-CSS: Inline browser specific CSS

3 rating from 50 votes

Comments Here

Sorry, the comment form is closed at this time.