Posted By

oobleck on 01/26/12


Tagged

css browser hacks browser-targeting


Versions (?)

Who likes this?

1 person have marked this snippet as a favorite

spee66


Comprehensive browser-targeting CSS hacks list


 / Published in: CSS
 

This is a fairly comprehensive list of browser-targeting CSS hacks

  1. /***** Selector Hacks ******/
  2.  
  3. /* IE6 and below */
  4. * html #uno { color: red }
  5.  
  6. /* IE7 */
  7. *:first-child+html #dos { color: red }
  8.  
  9. /* IE7, FF, Saf, Opera */
  10. html>body #tres { color: red }
  11.  
  12. /* IE8, FF, Saf, Opera (Everything but IE 6,7) */
  13. html>/**/body #cuatro { color: red }
  14.  
  15. /* Opera 9.27 and below, safari 2 */
  16. html:first-child #cinco { color: red }
  17.  
  18. /* Safari 2-3 */
  19. html[xmlns*=""] body:last-child #seis { color: red }
  20.  
  21. /* safari 3+, chrome 1+, opera9+, ff 3.5+ */
  22. body:nth-of-type(1) #siete { color: red }
  23.  
  24. /* safari 3+, chrome 1+, opera9+, ff 3.5+ */
  25. body:first-of-type #ocho { color: red }
  26.  
  27. /* saf3+, chrome1+ */
  28. @media screen and (-webkit-min-device-pixel-ratio:0) {
  29. #diez { color: red }
  30. }
  31.  
  32. /* iPhone / mobile webkit */
  33. @media screen and (max-device-width: 480px) {
  34. #veintiseis { color: red }
  35. }
  36.  
  37.  
  38. /* Safari 2 - 3.1 */
  39. html[xmlns*=""]:root #trece { color: red }
  40.  
  41. /* Safari 2 - 3.1, Opera 9.25 */
  42. *|html[xmlns*=""] #catorce { color: red }
  43.  
  44. /* Everything but IE6-8 */
  45. :root *> #quince { color: red }
  46.  
  47. /* IE7 */
  48. *+html #dieciocho { color: red }
  49.  
  50. /* Firefox only. 1+ */
  51. #veinticuatro, x:-moz-any-link { color: red }
  52.  
  53. /* Firefox 3.0+ */
  54. #veinticinco, x:-moz-any-link, x:default { color: red }
  55.  
  56. /* FF 3.5+ */
  57. body:not(:-moz-handler-blocked) #cuarenta { color: red; }
  58.  
  59.  
  60. /***** Attribute Hacks ******/
  61.  
  62. /* IE6 */
  63. #once { _color: blue }
  64.  
  65. /* IE6, IE7 */
  66. #doce { *color: blue; /* or #color: blue */ }
  67.  
  68. /* Everything but IE6 */
  69. #diecisiete { color/**/: blue }
  70.  
  71. /* IE6, IE7, IE8 */
  72. #diecinueve { color: blue\9; }
  73.  
  74. /* IE7, IE8 */
  75. #veinte { color/*\**/: blue\9; }
  76.  
  77. /* IE6, IE7 -- acts as an !important */
  78. #veintesiete { color: blue !ie; } /* string after ! can be anything */
  79.  
  80. /* IE8, IE9 */
  81. #anotherone {color: blue\0/;} /* must go at the END of all rules */
  82.  
  83.  
  84. /* Property prefix hacks */
  85.  
  86. /* IE6 only - any combination of these characters */
  87. _ - £ ¬ ¦
  88.  
  89. /* IE6/7 only - any combination of these characters */
  90. ! $ & * ( ) = % + @ , . / ` [ ] # ~ ? : < > |
  91.  
  92.  
  93. /* @media hacks */
  94.  
  95. /* IE6/7 only (via Keith Clarke) */
  96. @media screen\9 { ... }
  97.  
  98. /* IE6/7/8 (via Keith Clarke) */
  99. @media \0screen\,screen\9 { ... }
  100.  
  101. /* IE8 (via Keith Clarke) */
  102. @media \0screen { ... }
  103.  
  104. /* IE8/9 */
  105. @media screen\0 { ... }

Report this snippet  

You need to login to post a comment.