CSS Browser Hacks For Firefox, Opera, Safari, chrome & Internet Explorer in single CSS file

By: padya

29 Jul 2011

Most standards favoring browsers (IE, Opera, Chrome & Safari) have no method of targeting CSS to the specific browser while Mozilla, the buggiest browser, has a completely safe and easy method of serving CSS/HTML to only Mozilla.

The Setup

To show that the hacks are working correctly I created 6 paragraphs with their specific browser/version identifier within them. This will let you know that the hack is working correctly

  1. <p id="opera">Opera 7.2 - 9.5</p>
  2. <p id="safari">Safari</p>
  3. <p id="firefox">Firefox</p>
  4. <p id="firefox12">Firefox 1 - 2 </p>
  5. <p id="ie7">IE 7</p>
  6. <p id="ie6">IE 6</p>

 


Targeting Internet Explorer With CSS Using Conditional Comments

The easiest way to target IE is with conditional comments. There is a robust syntax that Microsoft has created to allow authors to do this. I'm not going to go into detail about this since it has been re-hashed a million times by other bloggers but here are two alternatives to parser CSS hacks:

  1. <!--[if IE 7]>
  2. <style type="text/css">
  3. </style>
  4. <![endif]-->
  5.  
  6. <!--[if IE 6]>
  7. <style type="text/css">
  8. </style>
  9. <![endif]-->

 


Targeting Internet Explorer With CSS Using Parser Hacks

I wouldn't recommend using these hacks since conditional comments are really, really easy to use but if you want to keep all your CSS in one file here is an alternative. Note that the IE7 hack will only apply to IE7 because IE6 does not understand the > selector. It should also be noted that no other browser will recognize this hack.

  1. /* IE 7 */
  2. html > body #ie7
  3. {
  4. *color:blue;
  5. }
  6.  
  7. /* IE 6 */
  8. body #ie6
  9. {
  10. _color:blue;
  11. }

 


Targeting Firefox With CSS

The first hack targets only Firefox 1 and 2 by using the body:empty hack. The second hack, which is quite clever target all versions of Firefox by using the proprietary extension -moz. -moz combined with the -document url-prefix() which by the way is used by Firefox Addon creators targets Firefox and Firefox alone. I've found that by using proprietary extensions to CSS, as hacks, usually means the most surefire way to target individual browsers without having to worry about another browser possibly parsing the CSS.

  1.  
  2. /* Firefox 1 - 2 */
  3. body:empty #firefox12
  4. {
  5. color:blue;
  6. }
  7.  
  8. /* Firefox */
  9. @-moz-document url-prefix()
  10. {
  11. #firefox { color:blue; }
  12. }
  13.  

 


Targeting Safari/Chrome With CSS

The Safari CSS hack works similar to the Firefox hack because it uses a Safari proprietary extension to CSS. By using the -webkit prefix we can target Safari and only Safari.

  1.  
  2. /* Safari */
  3. @media screen and (-webkit-min-device-pixel-ratio:0)
  4. {
  5. #safari { color:blue; }
  6. }
  7.  

 


Targeting Opera With CSS

The Opera CSS hack works because of negation in CSS. Currently I feel this hack is the weakest of all the hacks I've listed simply because it's targeting ALL browsers that support -min-device-pixel-ratio that aren't -webkit. It will only be a matter of time before Firefox supports this and this hack will then most likely apply to Firefox as well.

  1.  
  2. /* Opera */
  3. @media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0)
  4. {
  5. head~body #opera { color:blue; }
  6. }

 

 

Put them all together in a single .css file.

 

NB: CSS for safari and chrome is same. If changes occur it can be handled manually. Though changes will be minor.

2 Responses to CSS Browser Hacks For Firefox, Opera, Safari, chrome & Internet Explorer in single CSS file

Guest (not verified)

Wednesday, August 3, 2011 - 20:32   reply 

Great posting.. Question is it possible to target FF only on a PC (or FF on a MAC) -- I'm see some rendering issues on a project I'm working on.

Thanks!

Post new comment

The content of this field is kept private and will not be shown publicly.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Lines and paragraphs break automatically.

More information about formatting options

5 + 6 =
Solve this simple math problem and enter the result. E.g. for 1+3, enter 4.

php.png    firefox.png    open_source.png    ubuntu.png    drupal.png    civicrm.png     jquery

About the Author

Recent comments

Follow Me

flickr.png    yahoo.png    facebook.png    twitter.png

google.png    youtube.png    wordpress.png   

       wordpress.png

Ohloh profile for rahulbile

User login