CSS Hacks Targeting Firefox
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;
}
}
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.
Hey,
thanks for the tip but its not working in Firefox 3.6.x anymore..
but thius one works!
.selector, x:-moz-any-link, x:default { color:lime; } /* FireFox 3 */@Tom Thank you! This worked for me :)
@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
great hack thank you.
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!! :)
Is it possible to use certain classes when FF loads page?
@-moz-document url-prefix() doesnt seem to be working in Firefox 7. Any other ideas?
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
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?
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
Looks great,
Thanks you so much .
it’s working fine.
Great hack. Thank you!
Awesome and timely. Thanks!
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…
Thanks mate for this help :)
thank a lot very usefull post for me
Thanks a lot..its working perfectly..
Any specific CSS hack for MAC Chrome ??
Thanks so much for posting this. Such an easy hack but so useful!
Works \o/
Thanks, that works great ^_^
For anyone trying to target opera and safari you might to check this also
http://www.webmonkey.com/2010/02/browser-specific_css_hacks/
NIce Work!!!
i have hard problem in my firefox css width any advice ?
NIce Work! Thanks!
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.