2009
Mar
07

Conditional Comments

Syntax

Example
  1. <!--[if condition]> HTML <![endif]-->

Condition

Example
  1. <!-- Any Version of IE (typically 5, 5.5, 6, or 7) -->
  2. <!--[if IE]> HTML <![endif]-->
Example
  1. <!-- Versions Less Than Version -->
  2. <!--[if lt IE version]> HTML <![endif]-->
Example
  1. <!-- Versions Less Than or Equal To Version -->
  2. <!--[if lte IE version]> HTML <![endif]-->
Example
  1. <!-- Only Version -->
  2. <!--[if IE version]> HTML <![endif]-->
Example
  1. <!-- Versions Greater Than or Equal To Version -->
  2. <!--[if gte IE version]> HTML <![endif]-->
Example
  1. <!-- Versions Greater Than Version -->
  2. <!--[if gt IE version]> HTML <![endif]-->

Easy Selectors

IE6 and below

Example
  1. *html .hackname {
  2. property: value;
  3. }

IE7 and below

Example
  1. *:first-child+html .hackname {
  2. property: value;
  3. }
Example
  1. *html .hackname {
  2. property: value;
  3. }

IE7 only

Example
  1. *:first-child+html .hackname {
  2. property: value;
  3. }

IE7, Firefox, Safari, and Opera

Example
  1. html>body .hackname {
  2. property: value;
  3. }

IE8, Firefox, Safari, and Opera (Everything but IE6 and IE7)

Example
  1. html>/**/body .hackname {
  2. property: value;
  3. }

Firefox 2 only

Example
  1. .hackname, x:-moz-any-link {
  2. property: value;
  3. }

Firefox 3.0 and newer

Example
  1. .hackname, x:-moz-any-link, x-default {
  2. property: value;
  3. }

Any Firefox

Example
  1. @-moz-document url-prefix() {
  2. .hackname {
  3. property: value;
  4. }
  5. }

Safari only

Example
  1. .hackname empty {
  2. property: value !important;
  3. }

Safari 2 - 3.1

Example
  1. html[xmlns*=""]:root .hackname {
  2. property: value;
  3. }

Safari 2 - 3

Example
  1. html[xmlns*=""] body:last-child .hackname {
  2. property: value;
  3. }

Opera 9.27 and below, Safari 2

Example
  1. html:first-child .hackname {
  2. property: value;
  3. }

Safari 2 - 3.1, and Opera 9.25

Example
  1. *|html[xmlns*=""] .hackname {
  2. property: value;
  3. }

Firefox 3.5+, Safari 3+, Chrome 1+, and Opera 9+

Example
  1. body:first-of-type .hackname {
  2. property: value;
  3. }

Safari 3+, and Chrome 1+

Example
  1. @media screen and (-webkit-min-device-pixel-ratio:0) {
  2. .hackname {
  3. property: value;
  4. }
  5. }

iPhone/Mobile Webkit

Example
  1. @media screen and (max-device-width: 480px) {
  2. .hackname {
  3. property: value;
  4. }
  5. }

Everything but IE6 - 8

Example
  1. :root *> .hackname {
  2. property: value;
  3. }

Unrecommended Hacks

!important

Example
  1. .hackname {
  2. property: value !important; /* IE7 and Modern Browsers */
  3. property: value; /* IE6 and below */
  4. }

_property: value and -property: value

Example
  1. .hackname {
  2. _property: value; /* IE6 and below */
  3. }

*property: value

Example
  1. .hackname {
  2. *property: value; /* IE7 and below */
  3. }

property/***/: value9

Example
  1. .hackname {
  2. property/***/: value\9; /* IE7 and IE8 */
  3. }

property: value9

Example
  1. .hackname {
  2. property: value\9; /* IE6, IE7, and IE8 */
  3. }

Everything but IE6

Example
  1. .hackname {
  2. property/**/: value;
  3. }

Related Posts


回應 (Leave a comment)