Posted By

satie83 on 08/12/12


Tagged

css hacks compatibility


Versions (?)

CSS - Comprehensive List of Browser-Specific CSS Hacks


 / Published in: CSS
 

  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.   
  57.   
  58. /***** Attribute Hacks ******/
  59.   
  60. /* IE6 */
  61. #once { _color: blue }
  62.   
  63. /* IE6, IE7 */
  64. #doce { *color: blue; /* or #color: blue */ }
  65.   
  66. /* Everything but IE6 */
  67. #diecisiete { color/**/: blue }
  68.   
  69. /* IE6, IE7, IE8 */
  70. #diecinueve { color: blue\9; }
  71.   
  72. /* IE7, IE8 */
  73. #veinte { color/*\**/: blue\9; }
  74.   
  75. /* IE6, IE7 -- acts as an !important */
  76. #veintesiete { color: blue !ie; } /* string after ! can be anything */
  77.   
  78. /* IE8 */
  79. #anotherone  {color: blue\0/;} /* must go at the END of all rules */

Report this snippet  

You need to login to post a comment.