HOWTO: Target Firefox for Specific CSS

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!