firefox (Gecko) conditional style sheet

Question

Hello world, today I'm trying to optimize my website for a better rendering in firefox! my problems are the text-shadow and font-weight properties ... I would like to set custom values only for firefox (my website is mac only compatible so I don't need IE compatibility) but I don't wont to use separate style sheet for only these two properties!!! There is any way to do that? Or I must use a php script to filter the user agent and load customized style sheets for firefox?

Thanks in advance!

Answer 1

Conditionals are for IE only, sorry. Maybe some of those functions can help you, they work in gecko browsers only: Mozilla css extensions

Answer 2

You can use the CSS Browser Selector.

Answer 3

You seem like you would want to support ONLY browsers which support text-shadow, so why only target Firefox? Your approach should be to only change font-weight for those browsers which support text-shadow. But this is easier said than done.

Browser sniffers are not going to work unless they can differentiate between Firefox 3.5 and earlier versions. The one linked to by KahWee would not achieve this, but I would NOT recommend browser sniffing anyway -- it is not best practice.

I would instead recommend setting font-weight to whatever is meant for use with text-shadow, and then include an IE conditional to reset the majority of visitors' browsers back to the original, non-shadowed font-weight.

Example:

<style type="text/css" media="screen">
    .some-text {
        color: #fff;
        font-weight: bold;
        text-shadow: #000 0.1em 0.1em 0.2em;
    }
</style>

<!--[if IE]>
<style type="text/css" media="screen">
    .some-text {
         font-weight: normal;
         text-shadow: none; /* Does nothing now, but explicitly define NONE
            for future IE versions as that is what is intended */
    }
</style>
<![endif]-->

With this you will achieve text-shadow with proper font-weight in these browsers:

• Firefox 3.5+
• Opera 9.5+
• Safari 1.1+ (Since 2003!)
• Chrome 2.0+
• Konqueror 3.4+

And if you want drop shadow in IE you can use filter expressions with DropShadow(), but I personally do not recommend using proprietary CSS extensions.

Your only real "loss", then, would be having an improper font-weight for older, non-IE browsers like Firefox 3.0 and lower, and Opera 9.2x and lower.

So is it really worth JavaScript or PHP browser sniffing to change the font-weight for a very limited subset of older browsers?

If the answer is still yes, there are PHP browser sniffers like this one.