CSS3 Hacks - New type of hack!

[jeffclayton]

Firefox 31 is the first browser to support CSS3 Variables, which gives opportunity for a new type of hack. So here are my first CSS hacks using them.

Just make sure that you use a different variable in each definition. They really are variables, not constants, so they can override each other.

/* Firefox 31+ (CSS3 Variable Method) */
_:-moz-tree-row(hover), .selector {
    --this-variable:value; property:var(--this-variable);
}

And using a supports method…

/* Firefox 31+ (CSS3 Variable Method) */
@supports (-moz-appearance:meterbar) {
    .selector {
       --this-variable:value; property:var(--this-variable);
    }
}

Other browsers are supposed to follow suit, but for now just Firefox 31 and newer.

[jeffclayton]

Example Usage:

/* Firefox 31+  */
_:-moz-tree-row(hover), .ff31up {
   --myvar1: navy; background-color: var(--myvar1);
   --myvar2: white; color: var(--myvar2); 
}

This will show up in white on dark blue in Firefox >= 31

<div class='ff31up'>
   Firefox 31 and Newer (Using CSS3 Variables)
</div>

[jeffclayton]

Test page:

http://jeffclayton.github.io/css_hack_testing/css3_variable_hacks.html