advanced code snippet search

Posted By

o0110o on 10/30/12


Tagged

css hacks cross-browser


Versions (?)

Who likes this?

1 person have marked this snippet as a favorite

o0110o


Cross-Browser CSS Hacks.

 / Published in: CSS
 

List Of CSS Hacks From Around The Web.

http://www.brunildo.org/test/csshacks.html http://mynthon.net/howto/-/webdev/CSS-big-list-of-css-hacks.txt http://css-hacks.mozork.de/ http://creative-geeks.com/blog/2012/05/05/interesting-techniques-for-cross-browser-css/ http://samuli.hakoniemi.net/how-to-target-css-only-for-opera/ http://www.vitoblog.com/css-hacks-for-ie-firefox-chrome-safari-opera/

Expand | Embed | Plain Text 
  1. CSS HACKS
  2. -----------------------------------------------------------------
  3.  
  4. All except IE5
  5. selector { property/**/: value; }
  6.  
  7. All except IE5/Mac
  8. /*\*/ selector { property:value; } /**/
  9.  
  10. IE5/Mac
  11. /*\*//*/ selector { property:value; } /**/
  12.  
  13. All except IE5.5
  14. selector { property: /**/value; }
  15.  
  16. IE <= 5.5
  17. selector { property:value; p\roperty: normal-value; }
  18.  
  19. All except IE <= 6
  20. html>body selector { property:value; }
  21.  
  22. IE <= 6
  23. /*\*/ * html selector { property:value; } /**/
  24.  
  25. All except IE6 standards
  26. selector { property /**/: value; }
  27.  
  28. IE6+ quirks and IE5 (= all IE/Win quirks)
  29. * html selector { property /**/: value; }
  30.  
  31. IE6
  32. selector { _property:value; }
  33. * html selector { property:value; }
  34.  
  35. IE <= 7
  36. html >/**/body selector { property:value; }
  37. body*selector{ property:value; }
  38. selector { property:value !important!;}
  39. selector { property:value !inIE;}
  40.  
  41. IE7
  42. *:first-child+html selector { property:value; }
  43. *+html selector { property:value; }
  44. selector { .property:value; }
  45. selector { `property:value; }
  46. selector { ~property:value; }
  47. selector { !property:value; }
  48. selector { @property:value; }
  49. selector { #property:value; }
  50. selector { $property:value; }
  51. selector { %property:value; }
  52. selector { ^property:value; }
  53. selector { &property:value; }
  54. selector { *property:value; }
  55. selector { (property:value; }
  56. selector { )property:value; }
  57. selector { =property:value; }
  58. selector { +property:value; }
  59. selector { [property:value; }
  60. selector { ]property:value; }
  61. selector { {property:value; }
  62. selector { |property:value; }
  63. selector { ,property:value; }
  64. selector { <property:value; }
  65. selector { >property:value; }
  66. selector { /property:value; }
  67. selector { ?property:value; }
  68.  
  69. IE >= 7
  70. selector { property /*\**/: value\9; }
  71.  
  72. IE < 8
  73. selector\ { property:value; }
  74.  
  75. IE 8
  76. selector { property:value\9; }
  77. selector { property:value\0; }
  78.  
  79. IE8 & IE9
  80. selector { property:value; \ ;}
  81. selector { property:value;\0/;}
  82.  
  83. IE9
  84. :root selector { property:value \ ;}
  85. :root selector { property:value \0;}
  86. @media all and (min-width:0) { selector { property:value \0/; } }
  87.  
  88. IE9 & Opera 10
  89. :root selector { property:value\0;}
  90.  
  91. IE
  92. selector { *property:value; }
  93.  
  94. Opera 7
  95. @ Media all and (min-width: 0px) { selector { property:value; } }
  96.  
  97. Opera <= 9
  98. @media all and (min-width: 0px){ head~body selector { property:value; } }
  99. html:first-child selector { property:value; }
  100.  
  101. Opera <= 9.5
  102. @media all and (min-width: 0px) { html:first-child selector { property:value; } }
  103.  
  104. Opera >= 9.5
  105. x:-o-prefocus, selector { property:value; }
  106.  
  107. Opera < 10 & Chrome
  108. selector { -bracket-:hack(;property:value;); }
  109.  
  110. Opera >= 10
  111. @media not all and (-webkit-min-device-pixel-ratio:0) { selector { property:value; } }
  112.  
  113. Opera
  114. @media all and (min-width: 0px){ selector { property:value; } }
  115.  
  116. Opera & IE <= 6
  117. head: first-child + body selector { property:value; }
  118.  
  119. Safari 3
  120. selector:not(:root:root) { property:value; }
  121.  
  122. Safari
  123. @media all and (-webkit-min-device-pixel-ratio: 0) { selector { property:value; } }
  124. html:lang(en)>body selector { property:value; }
  125.  
  126. Mozilla & Safari
  127. html: not ([dummy]) selector { property:value; } 
  128.  
  129. Chrome & Safari
  130. @media screen and (-webkit-min-device-pixel-ratio:0) { selector { property:value; } }
  131.  
  132. Chrome
  133. body:nth-of-type(1) selector { color: #333333; }
  134. selector { (-bracket-:hack;property:value;); }
  135. selector { -bracket-:hack[;property:value;]; }
  136.  
  137. Firefox 1.5 & 2
  138. body:empty selector { property:value; }
  139.  
  140. Firefox >= 1.5
  141. @-moz-document url-prefix() { selector { property:value; } }
  142.  
  143. Firefox 3
  144. html&gt;/**/body .className, x:-moz-any-link, x:default { selector { property:value; } }
  145.  
  146. Firefox 4-6
  147. :-moz-any(selector} { property:value; }
  148.  
  149. Firefox
  150. @-moz-document url-prefix() { selector { property:value; } }
  151. html&gt;/**/body selector { property:value; }
  152.  
  153. CSS HACKS in (X)HTML
  154. -----------------------------------------------------------------
  155.  
  156. Netscape
  157. <style type="text/css"> @ import url ('style.css') </ style>
  158. <- & {True}; <style type="text/css"> selector { property:value; } </ style> ->
  159.  
  160. Opera
  161. <link rel="stylesheet" type="text/nonsense" href="style.css" />
  162.  
  163. Mozilla
  164. <link rel="extra-keyword stylesheet" type="text/css" href="style.css"/>
  165.  
  166. Safari
  167. <link rel="extra-keyword stylesheet" type="text/css" href="style.css"/>
  168.  
  169. IE (x = version #)
  170. <!--[if IE x]> CODE <![endif]-->
  171. <!--[if IE x]> CODE <![endif]-->
  172. <!--[if gte IE x]> CODE <![endif]-->
  173. <!--[if gt IE x]> CODE <![endif]-->
  174. <!--[if lte IE x]> CODE <![endif]-->
  175. <!--[if lt IE x]> CODE <![endif]-->
  176. <!--[!IE x]> CODE <![endif]-->
  177.  
  178. Examples: 
  179. <- [If gte IE x]> <style type="text/css"> selector { property:value; } </ style> <! [Endif] ->
  180.  
  181. or
  182.  
  183. <- [If gte IE x]> <style type="text/css"> @ import url ('styles.css') </ style> <[endif] ->
  184.  
  185. Only IE
  186. <!--[if IE]> CODE <![endif]-->
  187.  
  188.  
  189. All browsers except IE
  190. <!--[if !IE]>< --> CODE <!-- ><![endif]-->

Report this snippet  

You need to login to post a comment.