Generally – the best way to handle CSS is to keep it simple, clean, and without any hacks. From now and again there are some times when I need to write CSS specific to IE (using conditional comments). I recently came across a site where I needed to target Firefox because of a width issue. This is the first time in my many years I ran into this – and tried a number of hopeful solutions but nothing worked. I then found that if I used: @-moz-document url-prefix(){} that that would work out and only Firefox would use the styles within that.
Example:
.font_example {font-size:1.1em;}
@-moz-document url-prefix() {
.font_example {font-size:1.075em;}
}
Safari, Chrome, IE, etc will use the first .font_example code while Firefox will use the code within @-moz-document url-prefix(){}.
While this is not recommended for everyday usage – when and if you hit a wall, this could be something that will save a lot of time and headaches!
Scott L
Works beautifully, thanks
Jen
Glad it helped you!
Tobias
The styles are picked up by Chrome 22.0.1229.94 m as well.
Elliott Wall
Thank you, works perfectly
JP
Too bad that doesn’t work so well in FF18x. I still like Paul Irish’s solution:
body:not(:-moz-handler-blocked) [id or class] {font-size:3em;};
The problem with yours is that you can’t specify which item you are modifying..
#xyx @-moz-document url-prefex() {css code here}
OR
@-moz-document url-prefex() #XYX {css code here}
Unless i did something wrong.