By glazou on Wednesday 4 March 2009, 15:09 - CSS and style - Permalink

I got this morning an interesting email. In substance, the fallback mechanism is not enough to Web Designers because there is for instance no way you can specify - in clean CSS w/o hacks - display: table-cell for browsers that support it and something else for those that don't support it w/o having major interactions between the two style sets... The question asked by the sender was "why can't we have something like the following ?"

if (display table-cell)

CSS stuff here

else

CSS stuff here

endif

My first reply was of course "nah, that not CSS's role to fix browsers' holes".

Thinking a bit more about it, I took it as a mental exercise:

add some controls to CSS that can filter in/out based on the availability in the current rendering engine of a (property, value(s)) pair do that of course in a cross-browser JS chunk make sure that a stylesheet containing such a beast is still parsable from a CSS point of view

I took an hour to write it and I must say that even if this is probably not the kind of things one will ever use in a production environment, it's a funny exercise.

See the test document, the test "stylesheet" and the JS code. View the result here. Warning, it's a 0.1 I wrote in an hour. Still successfully tested on IE6, IE7, IE8, FF3, Safari 4 and Opera 9.