CssHackz #2
By glazou on Sunday 22 March 2009, 18:29 - Mozilla - Permalink
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; }
@else-implemented;
/* if not implemented */
p {background-color: red; }
@endif-implemented;
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.
Comments
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 }