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

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

  • 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]-->
[ad type=”banner”]

  • 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) {}

  • 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]-->
[ad type=”banner”]

  • you can use this:
css code 
body:not(:-moz-handler-blocked) h1 
{
    color: red;
  }
<h1>This should be red in FF</h1>

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;  }}

  • 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.
[ad type=”banner”]

Categorized in:

CSSHTML

Tagged in:

, , , , , , , , , , , , , , , ,