Mar 07
Conditional Comments

  • Syntax
  •           				<!--[if condition]> HTML <![endif]-->
              			
  • Condition
  •           				<!-- Any Version of IE (typically 5, 5.5, 6, or 7) -->
              				<!--[if IE]> HTML <![endif]-->
              			
              				<!-- Versions Less Than Version -->
              				<!--[if lt IE version]> HTML <![endif]-->
              			
              				<!-- Versions Less Than or Equal To Version -->
              				<!--[if lte IE version]> HTML <![endif]-->
              			
              				<!-- Only Version -->
              				<!--[if IE version]> HTML <![endif]-->
              			
              				<!-- Versions Greater Than or Equal To Version -->
              				<!--[if gte IE version]> HTML <![endif]-->
              			
              				<!-- Versions Greater Than Version -->
              				<!--[if gt IE version]> HTML <![endif]-->
              			
Easy Selectors

  • IE6 and below
  •           				*html .hackname { property: value; }
              			
  • IE7 and below
  •           				*:first-child+html .hackname { property: value; }
              			
              				*html .hackname { property: value; }
              			
  • IE7 only
  •           				*:first-child+html .hackname { property: value; }
              			
  • IE7, Firefox, Safari, and Opera
  •           				html>body .hackname { property: value; }
              			
  • IE8, Firefox, Safari, and Opera (Everything but IE6 and IE7)
  •           				html>/**/body .hackname { property: value; }
              			
  • Firefox 2 only
  •           				.hackname, x:-moz-any-link { property: value; }
              			
  • Firefox 3.0 and newer
  •           				.hackname, x:-moz-any-link, x-default { property: value; }
              			
  • Safari only
  •           				.hackname empty { property: value !important; }
              			
  • Safari 2 – 3.1
  •           				html[xmlns*=""]:root .hackname { property: value; }
              			
  • Safari 2 – 3
  •           				html[xmlns*=""] body:last-child .hackname { property: value; }
              			
  • Opera 9.27 and below, Safari 2
  •           				html:first-child .hackname { property: value; }
              			
  • Safari 2 – 3.1, and Opera 9.25
  •           				*|html[xmlns*=""] .hackname { property: value; }
              			
  • Firefox 3.5+, Safari 3+, Chrome 1+, and Opera 9+
  •           				body:first-of-type .hackname { property: value; }
              			
  • Safari 3+, and Chrome 1+
  •           				@media screen and (-webkit-min-device-pixel-ratio:0) {
              					.hackname { property: value; }
              				}
              			
  • iPhone/Mobile Webkit
  •           				@media screen and (max-device-width: 480px) {
              					.hackname { property: value; }
              				}
              			
  • Everything but IE6 – 8
  •           				:root *> .hackname { property: value; }
              			
Unrecommended Hacks

  • !important
  •           				.hackname {
              					property: value !important; /* IE7 and Modern Browsers */
              					property: value; /* IE6 and below */
              				}
              			
  • _property: value and -property: value
  •           				.hackname {
              					_property: value; /* IE6 and below */
              				}
              			
  • *property: value
  •           				.hackname {
              					*property: value; /* IE7 and below */
              				}
              			
  • property/*\**/: value\9
  •           				.hackname {
              					property/*\**/: value\9; /* IE7 and IE8 */
              				}
              			
  • property: value\9
  •           				.hackname {
              					property: value\9; /* IE6, IE7, and IE8 */
              				}
              			
  • Everything but IE6
  •           				.hackname { property/**/: value; }
              			
Related Posts


Leave a Reply

You must be logged in to post a comment.