CssHackz #2

JavaScript-based CssHackz were already fun to write, but I also wanted to prove it's not something hard to add to a modern browser. So I spent a few minutes adding it to Firefox. The code is for the 3.0.x branch and I did not test it on the trunk, but it works beautifully and everything is handled at parse time, not impacting later performance. Reminder, this adds knowledge of cases like:

@if-implemented { display: inline-block; }
/* if |display: inline-block| is implemented */
   p { background-color: green; color: yellow; }
/* if not implemented */
   p {background-color: red; }

You can add multiple declarations in the @if-implemented block, and the condition is true if at least one of the declarations is locally valid; I know it could be better if for instance the condition is true if all the declarations are valid, but that's all I have for you in 10 minutes' time, sorry :-)

The patch is here.


1. On Monday 23 March 2009, 17:49 by John Drinkwater

Strangely, I would prefer this format above, and not include an else version (you’d just repeat the above with a not)

@support (display: inline-block) { p { background-color: green; color: yellow; } }
@support not(display: inline-block) { p { background-color: red; } }

It kinda follows media query logic to allow and and , to join statements, and has a block to enclose the applied styles, like so:

@support (text-decoration:blink) { * { background: pink; } }

@support not( opacity ) { … etc }