2009
Mar
07
Conditional Comments
Syntax
Example
- <!--[if condition]> HTML <![endif]-->
Condition
Example
- <!-- Any Version of IE (typically 5, 5.5, 6, or 7) -->
- <!--[if IE]> HTML <![endif]-->
Example
- <!-- Versions Less Than Version -->
- <!--[if lt IE version]> HTML <![endif]-->
Example
- <!-- Versions Less Than or Equal To Version -->
- <!--[if lte IE version]> HTML <![endif]-->
Example
- <!-- Only Version -->
- <!--[if IE version]> HTML <![endif]-->
Example
- <!-- Versions Greater Than or Equal To Version -->
- <!--[if gte IE version]> HTML <![endif]-->
Example
- <!-- Versions Greater Than Version -->
- <!--[if gt IE version]> HTML <![endif]-->
Easy Selectors
IE6 and below
Example
- *html .hackname {
- property: value;
- }
IE7 and below
Example
- *:first-child+html .hackname {
- property: value;
- }
Example
- *html .hackname {
- property: value;
- }
IE7 only
Example
- *:first-child+html .hackname {
- property: value;
- }
IE7, Firefox, Safari, and Opera
Example
- html>body .hackname {
- property: value;
- }
IE8, Firefox, Safari, and Opera (Everything but IE6 and IE7)
Example
- html>/**/body .hackname {
- property: value;
- }
Firefox 2 only
Example
- .hackname, x:-moz-any-link {
- property: value;
- }
Firefox 3.0 and newer
Example
- .hackname, x:-moz-any-link, x-default {
- property: value;
- }
Any Firefox
Example
- @-moz-document url-prefix() {
- .hackname {
- property: value;
- }
- }
Safari only
Example
- .hackname empty {
- property: value !important;
- }
Safari 2 - 3.1
Example
- html[xmlns*=""]:root .hackname {
- property: value;
- }
Safari 2 - 3
Example
- html[xmlns*=""] body:last-child .hackname {
- property: value;
- }
Opera 9.27 and below, Safari 2
Example
- html:first-child .hackname {
- property: value;
- }
Safari 2 - 3.1, and Opera 9.25
Example
- *|html[xmlns*=""] .hackname {
- property: value;
- }
Firefox 3.5+, Safari 3+, Chrome 1+, and Opera 9+
Example
- body:first-of-type .hackname {
- property: value;
- }
Safari 3+, and Chrome 1+
Example
- @media screen and (-webkit-min-device-pixel-ratio:0) {
- .hackname {
- property: value;
- }
- }
iPhone/Mobile Webkit
Example
- @media screen and (max-device-width: 480px) {
- .hackname {
- property: value;
- }
- }
Everything but IE6 - 8
Example
- :root *> .hackname {
- property: value;
- }
Unrecommended Hacks
!important
Example
- .hackname {
- property: value !important; /* IE7 and Modern Browsers */
- property: value; /* IE6 and below */
- }
_property: value and -property: value
Example
- .hackname {
- _property: value; /* IE6 and below */
- }
*property: value
Example
- .hackname {
- *property: value; /* IE7 and below */
- }
property/***/: value9
Example
- .hackname {
- property/***/: value\9; /* IE7 and IE8 */
- }
property: value9
Example
- .hackname {
- property: value\9; /* IE6, IE7, and IE8 */
- }
Everything but IE6
Example
- .hackname {
- property/**/: value;
- }
回應 (Leave a comment)