CSS Browser Hacks

24.04.2009, 18:35

Paul Irish tries not to use CSS browser hacks anymore and instead "uses IE's conditional comments to apply classes to the body tag, but he put up a concise list of browser specific hacks he has used:

PLAIN TEXT
CSS:
  1.  
  2. /***** Selector Hacks ******/
  3.  
  4. /* IE 6 and below */
  5. * html #uno  { color: red }
  6.  
  7. /* IE 7 and below */
  8. *:first-child+html #dos { color: red }
  9.  
  10. /* IE 7 and modern browsers */
  11. html>body #tres { color: red }
  12.  
  13. /* Modern browsers (not IE 7) */
  14. html>/**/body #cuatro { color: red }
  15.  
  16. /* Opera 9.27 and below */
  17. html:first-child #cinco { color: red }
  18.  
  19. /* Safari */
  20. html[xmlns*=""] body:last-child #seis { color: red }
  21.  
  22. /*safari 3+, chrome 1+, opera9+, ff 3.5+ */
  23. body:nth-of-type(1) #siete { color: red }
  24.  
  25. /* safari 3+, chrome 1+, opera9+, ff 3.5+ */
  26. body:first-of-type #ocho {  color: red }
  27.  
  28. /* saf3, chrome1+ */
  29. @media screen and (-webkit-min-device-pixel-ratio:0) {
  30.  #diez  { background: #FFDECE; border: 2px solid #ff0000  }
  31. }
  32.  
  33. /***** Attribute Hacks ******/
  34.  
  35. /* ie6 and below */
  36. #once { _color:blue }
  37.  
  38. /* ie7 and below */
  39. #doce { *color: blue } /* or #color:blue */
  40.  
  41. /* 'Modern Browsers' includes IE8, whether you agree or not.. :) */
  42.  

He has included a test page and you can view the different browsers via browsershots.

Finally, he links to another concise list... of JavaScript sniffs.