CSS Hacks for Different Versions of Firefox

By Jeff Starr on Sunday, June 28, 2009 — 35 Responses

Post #706 categorized as Presentation, last updated on Jun 28, 2009
Tagged with css, firefox, hacks

[ Firefox ] In a perfect world, I don’t use CSS hacks, and certainly don’t recommend them. In the unpredictable, chaos of the real world, however, there are many situations where applying styles to particular browsers is indeed the optimal solution. Most of the time, I am targeting or filtering Internet Explorer (because it is so incredibly awesome), but occasionally I need to tweak something in a modern browser like Firefox, Safari, or Opera. In this article, we’ll look at CSS hacks targeting different versions of Firefox.

Some of these CSS hacks don’t validate, others are proprietary, and some are completely valid (depending on CSS specification). I have tested these hacks to the best of my ability, but don’t let that stop you from checking things out on your own (in fact, I absolutely recommend doing so). These Firefox hacks are organized according to version number and presented with ease of copying and pasting in mind. That said, here are some notes that apply to all of the hacks in this article:

  • For each hack, change only #selector, .selector, and of course the declaration blocks.
  • Hacks that do not validate as CSS are designated with [!] in the associated comment.
  • If you discover any inconsistencies, incompatibilities, or inoperabilities, please leave a comment.
  • This post is a work in progress. Please share any Firefox hacks that are not on the list.

Also keep in mind that, in general, there are two types of CSS hacks: those that target and those that filter. By targeting, we are referring to the application of CSS styles to a particular, targeted browser (or set of browsers) at the exclusion of all others. Conversely, by filtering, we are referring to the application of CSS styles to every browser except a particular browser (or set of browsers). In essence, this hack dichotomy represents two sides of the same coin. How you classify these various hacks all depends on perspective.

CSS Hacks targeting all Firefox

These hacks target all versions of Firefox:

/* Target all Firefox */
#selector[id=selector] { color: red; }

/* Target all Firefox */ 
@-moz-document url-prefix() { .selector { color: red; } } 

/* Target all Gecko (includes Firefox) */
*>.selector { color: red; }

CSS Hacks targeting Firefox 1.5 and newer

This hack targets Firefox versions 1.5 and newer:

/* Target Firefox 1.5 and newer [!] */
.selector, x:-moz-any-link, x:only-child { color: red; }

CSS Hacks targeting Firefox 2 and older

These hacks target Firefox 2 and older:

/* Target Firefox 2 and older [!] */
body:empty .selector { color: red; }

/* Target Firefox 2 and older */
#selector[id=SELECTOR] { color: red; }

/* Target FireFox 2 and older [!] */
html>/**/body .selector, x:-moz-any-link { color: red; }

CSS Hacks targeting Firefox 3

This hack targets Firefox 3 (and possibly newer):

/* Target FireFox 3 [!] */
html>/**/body .selector, x:-moz-any-link, x:default { color: red; }

Got more?

Please help by sharing any Firefox hacks that target or filter specific versions of Firefox. Bonus points for anyone with a hack for filtering all versions of Firefox (and only Firefox).

Copyright2010PerishablePress

Subscribe to Perishable Press

121358 visits

35 Responses

Top • Leave a comment

[ Gravatar Icon ]

#1 — Thomas Scholz

I use body:-moz-last-node .selector {} to address Gecko.

Are some of your selectors targetting really Firefox only and not Gecko in general? Did you test with Thunderbird, SeaMonkey or K-Meleon?

[ Gravatar Icon ]

#2 — Rob

Please note: While the W3C validator will flag vendor extensions, such as -moz or -webkit, as errors, in reality “vendor extensions” are valid markup.

[ Gravatar Icon ]

#3 — Thomas Scholz

@Rob Vendor extensions in css are neither markup nor valid. They’re just recommended informally.

[ Gravatar Icon ]

#4 — Stanko

I think there is no need for FF2 (and older) hacks. FF users are smart enough to upadte to newest version. Just take a look at the stats ;)

http://www.w3schools.com/browsers/browsers_firefox.asp

Cheers,
S

[ Gravatar Icon ]

#5 — Rob

@Thomas

CSS 2.1 docs Vendor specific extensions:
http://www.w3.org/TR/CSS21/syndata.html#vendor-keywords

[ Gravatar Icon ]

#6 — Thomas Scholz

@Rob: »This is a draft document and may be updated, replaced or obsoleted by other documents at any time. It is inappropriate to cite this document as other than work in progress.« http://www.w3.org/TR/CSS21/cover.html

Anyway, vendor-specific extensions will never be part of a W3C recommendation and should be treated as parsing errors by user agents.
In practise they’re rather safe to use – safer than comment hacks or some *_+ voodoo at least.

[ Gravatar Icon ]

#7 — Rob

@Thomas,
If you are going to hang your hat on thinking the CSS 2.1 documentation will be changing any time soon, I suggest you get a different job.

Also, you you think “vendor-specific extensions will never be part of a W3C recommendation” I suggest you also look at the source I linked to which is just that.

[ Gravatar Icon ]

#8 — haberler

puf… i hate css hacks but i know without that not happing nothing…

[ Gravatar Icon ]

#9 — Vladimir

OmniWeb 5/Gecko 1.2(?): html*#id:not([lang*=""]) something {}

Gecko 1.2(?) excluding OmniWeb 5 (invalid CSS): html:not([lang*=""])*#id something {}

Gecko 1.0+: html:not([xmlns*=""]) something {}

Gecko 1.0-1.8 (inclusive):

html:not([xmlns*=""]) #id[id="ID"] something,
html:not([xmlns*=""]) .class[class="CLASS"] something {}

(the idea behind this hack is that those version of Gecko rendering engine treat classes and ids in case insensitive manner).

Gecko 1.8+: html:not([xmlns*=""]):not(:only-child) something {}

Gecko 1.9:

html:not([xmlns*=""]) #id:not([id="ID"]) something,
html:not([xmlns*=""]) .class:not([class="CLASS"]) something {}

(see notice to 1.0-18)

Hope this helps :-)

[ Gravatar Icon ]

#10 — Jeff Starr

Indeed, you just doubled the scope of my article :)

Looking forward to testing these juicy morsels. Lots of possibilities here.

Thank you :)

[ Gravatar Icon ]

#11 — Jitendra vyas

Firefox 2 selectors not working properly it work on FF3 and 2 both

[ Gravatar Icon ]

#12 — Johnny

Worked beautifully. Thank you, kind sir.

Quite a pretty website you have here.

[ Gravatar Icon ]

#13 — Jonathan Hollin

Excellent hack. You just saved the day for me, so I’d like to say, “thank you, very much!” ;-)

[ Gravatar Icon ]

#14 — Chris

Thanks so much for this. *>. has got FF displaying correctly for just small element. Wish I found this out about 5 hours ago and didn’t waste my time on working out the outer browsers.

[ Gravatar Icon ]

#15 — Jim Summer

Only used this in FF 3.5.5
Ex:
----------
@-moz-document url-prefix(){
       /*firefox specific styles go in here*/
       #someID{top:3px;}
       .someClass{margin-right:8px;}
}
———-
Thank you,
Jim Summer
Jacksonville, FL

[ Gravatar Icon ]

#16 — Faheem

Great Article Big Big Thanks for you. I was very upset because of layout problems
that was occurring in FireFox Now it is easy for me to design for all IE and then use these hacks for FireFox.
Thanks a lot
God bless you.

[ Gravatar Icon ]

#17 — renuka

hi thanks for ur solution.

[ Gravatar Icon ]

#18 — CBloss

@Stanko - I agree. :) FF users are smart to usually upgrade.

Jeff - Thanks for this article! It really helped! Saved my day. Blasted IE!!

[ Gravatar Icon ]

#19 — g

how can i apply different styles for firefox version 3.0 and 3.6.Is it possible to do?

[ Gravatar Icon ]

#20 — Jeff Starr

@g: just style for 3.6 and then target 3.0 using the code in the article:

html>/**/body .selector, x:-moz-any-link, x:default { color: red; }

[ Gravatar Icon ]

#21 — John Phillips

Thanks very much for a very useful article (and comments!)

What about OS-specific hacks? Is that a silly question?

[ Gravatar Icon ]

#22 — Jeff Starr

@John: Nope, great question - it’s just not something covered in this post. I think I’ve touched on it in the past, but if not there are plenty of other resources available.

[ Gravatar Icon ]

#23 — Tom

#selector[id=selector] { color: red; }

also targets Chrome

[ Gravatar Icon ]

#24 — Dimitar Panov

Jeff Starr#20
@g: just style for 3.6 and then target 3.0 using the code in the article:

html>/**/body .selector, x:-moz-any-link, x:default { color: red; }

This doesn’s seem to work for me, because the 3.0 hack seems to work for 3.6.3 also.

Any ideas how to write styles only for FF 3.0?

There is this nasty bug where FF 3.0 doesn’t accept line-height for input fields.

[ Gravatar Icon ]

#25 — Amber Taylor

Rock on! Normally I wouldn’t target Firefox because it does it’s job right, but unfortunately padding and buttons (input type=submit) don’t fly across the board in browser-land. Only Firefox messed up the vertical alignment of the text :( … So I used the @-moz-document url-prefix() to fix it. Thanks for this tip!

[ Gravatar Icon ]

#26 — k6

Tx Thomas Scholz!. I added some code and all works fine in Thunderbird 3.1, Outlook 2007, Firefox 3.6.6 (Gmail), Chrome 5.0.375.99 (Gmail), IE8 (Gmail)

Here’s my fix.

…
.collapse { border-collapse: collapse }/* For Outlook */
body:-moz-last-node .collapse { border-collapse: separate } /* Reset to default for Thunderbird */
{/literal}
….

And cells look like this

[ Gravatar Icon ]

#27 — k6

Fix for last post

…
<style type="text/css">
.collapse { border-collapse: collapse }
body:-moz-last-node .collapse { border-collapse: separate }
</style>
<body>
…

<table width="490" border="0" cellpadding="0" cellspacing="0" class="collapse">

[ Gravatar Icon ]

#28 — Jeff Starr

Just a friendly reminder to wrap your code in <code> tags to prevent WordPress from eating it. Thanks!

Share your thoughts..

Top • Read official comment policy

The rules are simple. Comment intelligently. Stay on-topic. Don’t spam! Suspected spam will be deleted. Use your real name or nickname, not a site name or business name. Using a site name or business name is a good way to get your link or comment removed. Certain comments are moderated; if your comment does not appear after several days, or if you wish to comment privately, contact me. Also, by posting a comment, you grant this site a perpetual license to reproduce your comment, name, and website URL. Lastly, you may use basic HTML markup, but please do not use <pre> tags. Instead, wrap your code with <code> tags. Use a new set of <code> tags for each code term or phrase, as well as for each individual line of code (i.e., multiple lines of code require multiple code tags). Please see the complete comment policy for more information.

Search Perishable Press
Standards-based web design
WordPress, blogging & security
  • WordPress / Plugins, Themes, Tutorials
  • Blogging / Social media, social networking
  • Security / Anti-spam, blacklists, firewalls
Featured Content

Explore Perishable Press

Join 5406.22+ Subscribers
Perishable Resources
Perishable Projects
Random Friends
© 2010 Perishable Press • Design by Monzilla Media
Site Credits • Site Map • Linkage • Top