Firefox 2
html>/**/body .selector, x:-moz-any-link {
color: lime;
}Firefox 3
html>/**/body .selector, x:-moz-any-link, x:default {
color: lime;
}Any Firefox
@-moz-document url-prefix() {
.selector {
color: lime;
}
}CSS Hacks Targeting Firefox
Chris Coyier
on
Mayb I can test or guess it, but what does it do?
It targets only Firefox browsers, so you can make CSS exceptions. You would use it for hacks, to make your site more functional. (If required).
Most hacks are for I.E., since they can render a lot differently than other browsers.
Quite possibly the best little hack I have come across in ages! A little golden nugget. Thank you.
Hey,
thanks for the tip but its not working in Firefox 3.6.x anymore..
@-moz-document url-prefix() {
.selector {
color:lime;
}
}
This worked for firefox 31 also!!!!!
but thius one works!
.selector, x:-moz-any-link, x:default { color:lime; } /* FireFox 3 */@Tom Thank you! This worked for me :)
Thanks Tom
it helped me a lot
@tom: thanks a lot! works fine for me!
Thanks for the information provided.
Please let me know about Firefox 4.0 and IE9 CSS hacks….
Its very lovey hack for mozilla.
it has resolved my mozilla-firefox problem.
Thanks you
Vindesh Mohariya
IE 9 hack …
.selector { color: #fff\9; }
Firefox 4 hacks anyone?
“\9” works for both ie8 and ie9.
\9 works for all the IEs
It works to my website also thanks for sharing
.selector { color: #fff\9; }
Not working anymore for IE11
any hacks available?
uhmm.. what does it do? hehe sorry i’m a newbie to this. :))
Elements does not always display the same in IE as it does in Firefox.
So using \9 on an element will only target IE.
Example:
.whatever { margin: 20px 0 0 0;
margin: 25px 0 0 0 \9;
}
In all browsers except IE margin-top will be 20px but in IE margin-top will be 25px.
Hope this helped you!! :)
@Riyaadh .. “\9” says less than IE 9
Is it possible to use certain classes when FF loads page?
you can do that with php on the server side- or with javascript:
If you have jQuery the commented out code works and read a bit easier.
@-moz-document url-prefix() doesnt seem to be working in Firefox 7. Any other ideas?
write that your -moz-webkit-appearance in your actual css.
Mmhhh, if I use the any FF hack with a a:hover or so. It dosen’t work …
@-moz-document url-prefix() {
a:focus {padding-bottom: 7px;}
}
Has anyone help for that?
I solved it. It was a structure problem …
Thanks for the hot tip :-)
how did you solved it? i’m stuck at it.
@ahmet,
people won’t reply once their problem is fix, mee is just one of those kind. i’m actually looking for the solution too.
Cheers
How did you do it?
Great ! thank you.
do you know how to target FF9 only? I am actually having an issue of CSS rendering differently on Mac and PC using the same version of FF. Never had this problems in the past. Thank you
nice list. thx
Awesome and timely. Thanks for the hack help!
Hey Chris,
Never really had the change to thank you, yours is the first site I go to when I need to learn or find something out on CSS. Your site is invaluable to us web devs. I’ve really learned a lot from your site, keep it up.
Thanks
This doesn’t appear to be valid
@-moz-document url-prefix() {
#divhere {
color: red;
}
}
The CSS seems to be getting confused with the wrapping brackets which causes it to be invalid, any thoughts?
Maybe add indentation? Here’s my code:
Looks like it works now, though only if I add !important at the end of the value…. weird. Also of note i am using a scss sheet
Thank you for the post. Worked perfectly. I guess most of the programs we work with (AKA Dreamweaver, CSSEdit, etc) will say an error with this hack since it has a double bracket {.
At least is what I think happens with CSSEdit when I wrote it there.
I’ve translated this post to spanish here.
http://corchoweb.com/2012/codigo/hacks-de-css-especificos-para-firefox/
Thanks again.
Worked Perfectly :)
Thanks
Any one help me to get solution
Iam Using this code
@-moz-document url-prefix() {} – it works in all firefox except Mac
Please advice me.
Thanks in advance..
I am using slider to Unlock using jQuery. But doesn’t working well with Firefox. Please tell me What could be the alternative of -webkit-animation for firefox?.
Thanks in advance !
how do you get this to work if using hover or focus states? thank you.
When i use this code
@-moz-document url-prefix() {
.selector {
color:lime;
}
}
it works in my pc but when i upload the site on cpanel it does’nt work
I’m by no means any sort of web design guru, but I have found over the course of making 25 or so web sites that if there is a difference between Firefox and IE9 and you aren’t being particularly experimental in your use of advanced CSS selectors, it makes sense to check one really basic thing: that your code validates, both html-wise and CSS-wise. Modern browsers really are pretty consistent, especially if you use a reset CSS such as Eric Meyer’s, but they certainly do different things in trying to make faulted code work. So if you didn’t already validate, it is definitely worth taking your code there first. IMHO.
Whats about other web browsers (like Safari and Opera)??
This will work in Opera.
noindex:-o-prefocus, .selector{
margin-left: 3em;
}
For Safari. You need the extra brackets to wrap your selector and rules in the hack for webkit. I’ve noticed as I type this up it’s putting the second set of brackets on the same line. Those two brackets on the bottom need to be on a seperate line.
@media all and (-webkit-min-device-pixel-ratio:0){
.selector{
margin-left: 3em;
}
}
It works.. Thanks :-) good Job
you are DA BOMB, man !!! Saved my butt.
That’s great. Only, the code that targets all FF versions doesn’t validate. :(
Sorry @chris – no success by using @import, butI usually dont use import since a long time, so why do you do?
@buelem thx for the link, why we have to do that for all these browsers… where is the time when 2 or 3 browser are up to date and not that much more…
thank a lot very usefull post for me
Any specific CSS hack for MAC Chrome ??
For anyone trying to target opera and safari you might to check this also
http://www.webmonkey.com/2010/02/browser-specific_css_hacks/
i have hard problem in my firefox css width any advice ?
Has anyone had success using @import inside of moz specific css?
Something like this:
@-moz-document url-prefix() {
@import url(“ff_font.css”);
}
I would like to have a hack that will target chrome and not Safari. Trouble is they are both webkit platforms. When I target Safari I sort of have to kind of divide the difference between Safari and Chrome.
Superb hack for firefox….many thanks…
I have used this for quite some time now, and wanted to get back on here and thank you for these as they have made things a whole lot easier when cross-browser fixing websites.
Hi There !
I have question ! :
How can i write special styles for firefox MOBILE ? ( For Firefox mobile application )
Much Thanks
Best Regards
Hi Adrian,
You simply wrap your Firefox stuff in a media query
e.g.
Hey Summit Web Solutions,
Thank you for the share! I needed Firefox specific media queries to polish off a client site.
Thanks a bunch, Summit Web Solutions. This solved my problem :)
I’m really surprised this doesn’t work for you. It certainly looks like you have it typed correctly. You can go to my website and get into my stylesheet and see how I’ve used this foxfire hack. In my current stylesheet I have used it 42 times.
Sharon ! I’m really surprised this doesn’t work for you. It certainly looks like you have it typed correctly. You can go to my website and get into my stylesheet and see how I’ve used this foxfire hack. In my current stylesheet I have used it 42 times.
@-moz-document url-prefix() {
div.orgChart tr.lines td.line {
width : 1px;
height : 35px;
-moz-width : 1px;
-moz-height : 35px;
}
div.orgChart tr.lines td.top {
border-top : 3px solid black;
-moz-border-top : 3px solid black;
}
div.orgChart tr.lines td.left {
border-right : 2px solid black;
-moz-border-right : 2px solid black;
}
div.orgChart tr.lines td.right {
border-left : 2px solid black;
-moz-border-left : 2px solid black;
}
}
above code for create a line in chart
but there are not working
@-moz-document url-prefix() {
Class {
color:lime;
}
}
it is working now
(*class) this is hack for i8 only
(padding=0px 0px 0px 0px\9) this hack for ie9,ie10
I know this post has been kicking around for a while now! But should this hack be working in the very latest version of Firefox?
I have a repeating background issue I want to fix up on a pseudo element!
If it’s not working, is there a newer solution?
Thanks.
Okay, so the Firefox 3 version worked for me in the end. But for whatever reason I can’t get Firefox any version to play ball.
Anyway, it now works, which is great!
Thanks Chris.
Worked! Thanks for saving time
This works!!! Thanks :)
it is not working in media queries. can anyone suggest me how to use it inside of media queries
use the media query to load a css document. Put it in there. Then it always works.
how about for ie
Thank you so much for posting this. I have been working on styling a really complicated slider for 2 days now, only on the third to realize that firefox took some of my CSS and just started making pixel values up. Quite annoying.
I used the Firefox any version and it’s working fine.
Any hacks for Mozilla below 32 and above 33??
Any Firefox is not working in FF 22
Css for any firefox not working
Thanks it’s really helpfull for me.
I found a comprehensive list of browser targeting media queries but I’ve lost it.
Does anyone have a good list that has all of them?
I don’t care about obsolete browsers but All current browsers.
Any updates for this? I am stuck with targeting just firefox. Firefox 36.0.1
Thanks
Brian
check out this example
http://rafael.adm.br/css_browser_selector/
Awesome! It’s work for me
This works great, did exactly what I needed. Thank you :)
Great!!Thanks!!
Hi I have firefox version 44.0.2.How can i apply css hack for this version.
Use the any firefox snippet and it will target any version of firefox
thank you so much dear
you solved my big problem
Awesome!! These are great especially when you have pesky little bugs with pseudo elements in different browsers. Another Awesome Snippt thank you so much!!!
Thanks a lot. The third code works perfectly
extremely helpful in my current project. 5 Stars from my side
Excellent! This works for me. Was having trouble with the amazing but rather tightly coded ‘Newspaper’ theme. Any CSS tweak seemed to break the layout when viewed in Firefox. Just adding the plugin plus, .gecko or .webkit in front of the dot-whatever CSS tweak in the Style.css file controlled the custom adjustment to either Chrome or Firefox browsers.
Thank you !
Chris, I hope you’re still reading these despite how old it is…
How would you do a media query for Firefox’s iOS application?!
selector:
I can confirm at july 2017 the “Any Firefox” still works like a charm even into a nested SASS
Thank you! Only, the code that targets all Firefox versions doesn’t validate. :)
Thanks! Saved my life.
the “Any Firefox” hack will be dropped with firefox 59 (mainstream release: March 13, 2018.) => see https://www.fxsitecompat.com/en-CA/docs/2015/moz-document-support-will-be-dropped/
for chrome ==>@supports (-webkit-appearance:none) {}
for firefox ==>_::-moz-range-track, body:last-child .selector {}
more you can refer this site http://browserhacks.com/
.foo {
padding: 5px 10px;
@-moz-document url-prefix() {
padding: 4px 10px;
}
}
No longer working in firefox 60.0.2 (64-bit)
Anything new working I hope?
Thanks for the heads up! Yeah, looks like that was an experimental property that Mozilla stopped supporting after Firefox 59. I’ve updated the snippet, but the new syntax is:
@document url().Thanks Geoff. The new syntax must still be experimental as well. I just tried it to hide a div in firefox and it doesn’t work. By the way, the div I want hide in firefox is Gtranslate, which doesn’t work in firefox.
It’s behind a flag as of FF 61.
layout.css.moz-document.content.enabled = trueBest to consult MDN for any -moz- related things. They ought to know ;)
How can i write media queries under @-moz-document url-prefix()? It is not working.
I think it’s otherwise, you need to use
@-moz-document url-prefix()under media queries…Just wanted to say thanks! My video backgrounds are not working on Firefox Android, so I’ve used this code to hide the DIV, to show a normal image background instead.
Hah! I’m being a dummy! I think the code I use will attempt to target both desktop and phone Firefox.
@-moz-document url-prefix() {
.selector {
color: lime;
}
}
Does anyone know how to target Firefox Android only please?