Home › Computers › CSS Hack using CSS3 Variables (Firefox 31 and Newer)

CSS Hack using CSS3 Variables (Firefox 31 and Newer)

Posted on August 10, 2014 by Jeff Clayton — Leave a comment 
These are my legal CSS Hacks for fixing web browser quirks or outright bugs. Please enjoy, I have been working on them for years. May it help you if you need them. Please read here first: [What are these CSS Hacks Anyway?] Then check my [Live CSS Hacks Test Page] and also [BrowserHacks.com] where I sent new hacks and test submissions for the site.

Firefox 31 is the first browser to support CSS3 Variables,
so here are my first CSS hacks using them.

Code samples I have seen on the net tend to show defining the variables in a :root element separate from the classes where they are used. That is of course fine, but for this purpose however I am taking a more slimline approach by turning it into a more simple command… a one-liner (split into multiple lines so you can read it here more easily in this format)

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

[Live Test Page Here]

/* Firefox 31+ (CSS3 Variable Method) */

_:-moz-tree-row(hover), .selector {
    --this-variable:value; property:var(--this-variable);
}

Author: Jeff Clayton

And using a supports method…

/* Firefox 31+ (CSS3 Variable Method) */

@supports (-moz-appearance:none) {
    .selector {
       --this-variable:value; property:var(--this-variable);
    }
}

Author: Jeff Clayton

Firefox dropped support for the -moz-background-inline-policy property in the previous version, so this combination results in version 31 only.

/* Firefox 31 (CSS3 Variable Method) */

@supports (-moz-background-inline-policy:continuous) {
       .selector {
          --this-variable:value; property:var(--this-variable); 
    } 
}

Author: Jeff Clayton

This and other examples are on [my regular larger and more complete live test page] as well.

About

IT Director/Senior Software Engineer, Photographer I test and create new CSS web page formatting hacks for BrowserHacks.com for the purpose of repairing web sites. PS-- CSS hacks are fun, but please attempt good CSS first unless in a bind. See Test Pages: https://browserstrangeness.bitbucket.io and https://browserstrangeness.github.io

Tagged with: , , , , , , , , ,
Posted in Computers, Cool Code, CSS, CSS Hacks, Firefox, Firefox-All, Hacks

Leave a comment