advanced code snippet search

Posted By

neal_grosskopf on 07/22/08


Tagged

css hacks CSS3


Versions (?)

Who likes this?

6 people have marked this snippet as a favorite

neal_grosskopf
SpinZ
demixo
johnloy
colingardom
droopysignal


CSS Browser Hacks For Firefox, Opera, Safari

 / Published in: CSS
 

URL: http://www.nealgrosskopf.com/tech/thread.asp?pid=20

Learn how to target Firefox, Opera, Safari & Internet Explorer with these surefire CSS Hacks.

Expand | Embed | Plain Text 
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  2. <html lang="en">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5. <title>CSS Browser Hacks</title>
  6.  
  7. <style type="text/css">
  8. body p
  9. {
  10. display: none;
  11. }
  12. /* Opera */
  13. html:first-child #opera
  14. {
  15. display: block;
  16. }
  17.  
  18. /* IE 7 */
  19. html > body #ie7
  20. {
  21. *display: block;
  22. }
  23.  
  24. /* IE 6 */
  25. body #ie6
  26. {
  27. _display: block;
  28. }
  29.  
  30. /* Firefox 1 - 2 */
  31. body:empty #firefox12
  32. {
  33. display: block;
  34. }
  35.  
  36. /* Firefox */
  37. @-moz-document url-prefix()
  38. {
  39. #firefox { display: block; }
  40. }
  41.  
  42. /* Safari */
  43. @media screen and (-webkit-min-device-pixel-ratio:0) 
  44. { 
  45. #safari { display: block; }
  46. }
  47.  
  48. /* Opera */
  49. @media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0)
  50. {
  51. head~body #opera { display: block; }
  52. }
  53. </style>
  54. </head>
  55.  
  56. <body>
  57.  
  58. <p id="opera">Opera 7.2 - 9.5</p>
  59. <p id="safari">Safari</p>
  60. <p id="firefox">Firefox</p>
  61. <p id="firefox12">Firefox 1 - 2 </p>
  62. <p id="ie7">IE 7</p>
  63. <p id="ie6">IE 6</p>
  64.  
  65. </body>
  66. </html>

Report this snippet  

You need to login to post a comment.