advanced code snippet search

Posted By

arunpjohny on 06/13/11


Tagged

css css-hack


Versions (?)

CSS Hacks

 / Published in: CSS
 

URL: http://paulirish.com/2009/browser-specific-css-hacks/

Expand | Embed | Plain Text 
  1. /*IE8 Standards-Mode Only:*/
  2. .test { color /*\**/: blue\9 }
  3.  
  4. /*All IE versions, including IE8 Standards Mode:*/
  5. .test { color: blue\9 }
  6.  
  7.  
  8. /* IE6 and below */
  9. * html #el-id  { color: red }
  10.  
  11. /* IE7 */
  12. *:first-child+html #el-id { color: red } 
  13.  
  14. /* IE7, FF, Saf, Opera  */
  15. html>body #el-id { color: red }
  16.  
  17. /* IE8, FF, Saf, Opera (Everything but IE 6,7) */
  18. html>/**/body #el-id { color: red }
  19.  
  20. /* Opera 9.27 and below, safari 2 */
  21. html:first-child #el-id { color: red }
  22.  
  23. /* Safari 2-3 */
  24. html[xmlns*=""] body:last-child #el-id { color: red }
  25.  
  26. /* safari 3+, chrome 1+, opera9+, ff 3.5+ */
  27. body:nth-of-type(1) #el-id { color: red }
  28.  
  29. /* safari 3+, chrome 1+, opera9+, ff 3.5+ */
  30. body:first-of-type #el-id {  color: red }
  31.  
  32. /*----------------------------------------------------------------------------------------------------------------------------------*/
  33.  
  34. /* saf3+, chrome1+ */
  35. @media screen and (-webkit-min-device-pixel-ratio:0) {
  36.  #el-id  { color: red  }
  37. }
  38.  
  39. /* iPhone / mobile webkit */
  40. @media screen and (max-device-width: 480px) {
  41.  #el-id { color: red  }
  42. }
  43.  
  44.  
  45. /* Safari 2 - 3.1 */
  46. html[xmlns*=""]:root #el-id  { color: red  }
  47.  
  48. /* Safari 2 - 3.1, Opera 9.25 */
  49. *|html[xmlns*=""] #el-id { color: red  }
  50.  
  51. /* Everything but IE6-8 */
  52. :root *> #el-id { color: red  }
  53.  
  54. /* IE7 */
  55. *+html #el-id {  color: red }
  56.  
  57. /* Firefox only. 1+ */
  58. #el-id,  x:-moz-any-link  { color: red }
  59.  
  60. /* Firefox 3.0+ */
  61. #el-id,  x:-moz-any-link, x:default  { color: red  }
  62.  
  63. /* FF 3.5+ */
  64. body:not(:-moz-handler-blocked) #el-id { color: red; }
  65.  
  66.  
  67. /***** Attribute Hacks ******/
  68.  
  69. /* IE6 */
  70. #el-id { _color: blue }
  71.  
  72. /* IE6, IE7 */
  73. #el-id { *color: blue; /* or #el-id: blue */ }
  74.  
  75. /* Everything but IE6 */
  76. #el-id { color/**/: blue }
  77.  
  78. /* IE6, IE7, IE8 */
  79. #el-id { color: blue\9; }
  80.  
  81. /* IE7, IE8 */
  82. #el-id { color/*\**/: blue\9; }
  83.  
  84. /* IE6, IE7 -- acts as an !important */
  85. #el-id { color: blue !ie; } /* string after ! can be anything */
  86.  
  87. /* IE8, IE9 */
  88. #el-id  {color: blue\0/;} /* must go at the END of all rules */
  89.  
  90. /*----------------------------------------------------------------------------------------------------------------------------------*/
  91. /*IE 6 and below*/
  92. * html {}
  93. /*IE 7 and below*/
  94. *:first-child+html {} * html {}
  95. /*IE 7 only*/
  96. *:first-child+html {}
  97. /*IE 7 and modern browsers only*/
  98. html>body {}
  99. /*Modern browsers only (not IE 7)*/
  100. html>/**/body {}
  101. /*Recent Opera versions 9 and below*/
  102. html:first-child {}

Report this snippet  

You need to login to post a comment.