[Solved -7 Answers] CSS - Targeting only Firefox with CSS-Learn in 30 Sec from Microsoft Awarded MVP

PROBLEM:

Using conditional comments it is easy to target Internet Explorer with browser-specific CSS rules:

css code

<!--[if IE 6]>
...include IE6-specific stylesheet here...
<![endif]-->

Sometimes it is the Gecko engine (Firefox) that misbehaves. What would be best way to target only Firefox with your CSS rules and not a single other browser? That is, not only should Internet Explorer ignore the Firefox-only rules, but also WebKit and Opera should.

SOLUTION 1:

This is probably the most clean and easy solution out there and does not rely on JavaScript being turned on.

html code

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
@-moz-document url-prefix() {
    h1 {
        color: red;    }}
</style>
</head>
<body>
<h1>This should be red in FF</h1>
</body>
</html>

It’s based on yet another Mozilla specific CSS extension.

SOLUTION 2:

Here is how to tackle three different browsers: IE, FF and Chrome

css code

<style type='text/css'>
/*This will work for chrome */
#categoryBackNextButtons
{    
width:490px;}
/*This will work for firefox*/
@-moz-document url-prefix() 
{
    #categoryBackNextButtons
{
        width:486px;    }}
</style>
<!--[if IE]>
<style type='text/css'>
/*This will work for IE*/
#categoryBackNextButtons
{   
 width:486px;
}
</style>
<![endif]-->

SOLUTION 3:

Here is some browser hacks for targeting only the Firefox browser,

Using selector hacks.

css code

_:-moz-tree-row(hover), .selector {}

JavaScript Hacks

css code

var isFF = !!window.sidebar;

var isFF = 'MozAppearance' in document.documentElement.style;

var isFF = !!navigator.userAgent.match(/firefox/i);

Media Query Hacks

This is gonna work on, Firefox 3.6 and Later

css code

@media screen and (-moz-images-in-menus:0) {}

SOLUTION 4:

Using -engine specific rules ensures effective browser targeting.

html code

<style type="text/css">
    //Other browsers
    color : black;
    //Webkit (Chrome, Safari)
    @media screen and (-webkit-min-device-pixel-ratio:0) 
{ 
        color:green;    
}
    //Firefox
    @media screen and (-moz-images-in-menus:0) 
{
        color:orange;   
 }
</style>
//Internet Explorer
<!--[if IE]>
     <style type='text/css'>
        color:blue;
    </style>
<![endif]-->

SOLUTION 5:

you can use this:

css code

body:not(:-moz-handler-blocked) h1 
{
    color: red;
  }
<h1>This should be red in FF</h1>

SOLUTION 6:

Firefox 2 :

css code

html>/**/body .selector, x:-moz-any-link 
{
  color:lime;
}

Firefox 3 :

css code

html>/**/body .selector, x:-moz-any-link, x:default 
{
  color:lime;
}

Any Firefox :

css code

@-moz-document url-prefix() 
{ 
  .selector
 {
     color:lime;  }}

SOLUTION 7:

The only way to do this is via various CSS hacks, which will make your page much more likely to fail on the next browser updates.
If anything, it will be LESS safe than using a js-browser sniffer.

[Solved -7 Answers] CSS – Targeting only Firefox with CSS

Using selector hacks.

JavaScript Hacks

Media Query Hacks

Firefox 2 :

Firefox 3 :

Any Firefox :

About the author

Wikitechy Editor

Add Comment

OTHER LANGUAGES

Using selector hacks.

JavaScript Hacks

Media Query Hacks

Firefox 2 :

Firefox 3 :

Any Firefox :

You may also like

About the author

Wikitechy Editor

Add Comment

OTHER LANGUAGES