advanced code snippet search

We Recommend

CSS: The Definitive Guide CSS: The Definitive Guide
Provides you with a comprehensive guide to CSS implementation, along with a thorough review of all aspects of CSS 2.1. Updated to cover Internet Explorer 7, Microsoft's vastly improved browser, this new edition includes content on positioning, text wrapping (nowrap), lists and generated content, table layout, user interface, paged media, and more.

Posted By

neal_grosskopf on 07/22/08


Tagged

css hacks CSS3


Versions (?)


Who likes this?

2 people have marked this snippet as a favorite

neal_grosskopf
SpinZ


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.

Plain TextExpand 
  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.