HOWTO: Target Firefox for Specific CSS

CSS HOWTOs Web Development

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!

5 thoughts on “HOWTO: Target Firefox for Specific CSS”

  1. 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.

Leave a Reply

Your email address will not be published.
*
*

This site uses Akismet to reduce spam. Learn how your comment data is processed.

HOWTOs Javascript Web Development

Find JS Code Issues and Errors With JSLint

Ever have a page not load properly in IE 7 but it loads fine – without error – with all other browsers? After you validate all your CSS/HTML and the error or funky behavior persists…and you have made sure your doctype is correct – what can you do? Validate your JS using JS Lint. What […]

Apple

Looking For Inspiration for Over 12 Years: Apple.com

Over the past 12 years (I remember starting to look to Apple for great web design back in 1999) – I have often looked to Apple’s web site for best practices in navigation (top/tabbed), general layout, and usage of imagery when thinking about designing web sites for myself or my clients. I have to admit […]