CSS Hack using CSS3 Variables (Firefox 31 and Newer)

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.

Advertisements

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 Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: