CSS Hacks for Firefox 22

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.

Here is the simplest of the ones I have created. It works, but will appear in earlier versions of Firefox if a flag has been set by the user. This does not really matter in most cases.

/* Firefox 22+ */

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

Author: Jeff Clayton

This slight change allows it to require version 22 and newer:

/* Firefox 22+ */

@supports (-moz-appearance:none) and (display:flex) {
    .selector { property:value; } 
}

Author: Jeff Clayton

This is the older way, the first way I found and tested to do this.

/* Firefox 22+ */

@supports (-moz-appearance:meterbar) and (display:flex) {
    .selector { property:value; } 
}

Author: Jeff Clayton

For those who like one-liners, here is a CSS hack I created for this purpose using pseudos:

/* Firefox 22+ */

_:-moz-tree-row(hover), _::-moz-range-progress, .selector { property:value; }

Author: Jeff Clayton

As mentioned above, to test this live, view it on my test page at:

[ http://browserstrangeness.bitbucket.org/css_hacks.html ]

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 22, Hacks, Software, Tech, Web, Web Browser, Web Browsers

Leave a comment