Created
August 30, 2013 03:53
-
-
Save bennyzhao/6386182 to your computer and use it in GitHub Desktop.
CSS Hacks
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* | |
* Selector Hacks | |
* | |
**/ | |
/* IE6 and below */ | |
* html #uno { color: red } | |
/* IE7 */ | |
*:first-child+html #dos { color: red } | |
/* IE7, FF, Saf, Opera */ | |
html>body #tres { color: red } | |
/* IE8, FF, Saf, Opera (Everything but IE 6,7) */ | |
html>/**/body #cuatro { color: red } | |
/* Opera 9.27 and below, safari 2 */ | |
html:first-child #cinco { color: red } | |
/* Safari 2-3 */ | |
html[xmlns*=""] body:last-child #seis { color: red } | |
/* safari 3+, chrome 1+, opera9+, ff 3.5+ */ | |
body:nth-of-type(1) #siete { color: red } | |
/* safari 3+, chrome 1+, opera9+, ff 3.5+ */ | |
body:first-of-type #ocho { color: red } | |
/* saf3+, chrome1+ */ | |
@media screen and (-webkit-min-device-pixel-ratio:0) { | |
#diez { color: red } | |
} | |
/* iPhone / mobile webkit */ | |
@media screen and (max-device-width: 480px) { | |
#veintiseis { color: red } | |
} | |
/* Safari 2 - 3.1 */ | |
html[xmlns*=""]:root #trece { color: red } | |
/* Safari 2 - 3.1, Opera 9.25 */ | |
*|html[xmlns*=""] #catorce { color: red } | |
/* Everything but IE6-8 */ | |
:root *> #quince { color: red } | |
/* IE7 */ | |
*+html #dieciocho { color: red } | |
/* IE 10+ */ | |
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { | |
#veintiun { color: red; } | |
} | |
/* Firefox only. 1+ */ | |
#veinticuatro, x:-moz-any-link { color: red } | |
/* Firefox 3.0+ */ | |
#veinticinco, x:-moz-any-link, x:default { color: red } | |
/* FF 3.5+ */ | |
body:not(:-moz-handler-blocked) #cuarenta { color: red; } | |
/** | |
* | |
* Attribute Hacks | |
* | |
**/ | |
/* IE6 */ | |
#once { _color: blue } | |
/* IE6, IE7 */ | |
#doce { *color: blue; /* or #color: blue */ } | |
/* Everything but IE6 */ | |
#diecisiete { color/**/: blue } | |
/* IE6, IE7, IE8, but also IE9 in some cases :( */ | |
#diecinueve { color: blue\9; } | |
/* IE7, IE8 */ | |
#veinte { color/*\**/: blue\9; } | |
/* IE6, IE7 -- acts as an !important */ | |
#veintesiete { color: blue !ie; } /* string after ! can be anything */ | |
/* IE8, IE9 */ | |
#anotherone {color: blue\0/;} /* must go at the END of all rules */ | |
/* IE9, IE10 */ | |
@media screen and (min-width:0\0) { | |
#veintidos { color: red} | |
} | |
min-height:300px; | |
//height:300px; /* matches only IE6, IE7 */ | |
selector, x:-IE7 { } /* IE7 only */ | |
selector,{ … } /* lte ie7 */ | |
.suckyie6.someClass { … } /* lte ie6 */ | |
/* Property prefix hacks */ | |
/* IE6 only - any combination of these characters */ | |
_ - £ ¬ ¦ | |
/* IE6/7 only - any combination of these characters */ | |
! $ & * ( ) = % + @ , . / ` [ ] # ~ ? : < > | | |
/** | |
* | |
* @media hacks | |
* | |
**/ | |
/* IE6/7 only (via Keith Clarke) */ | |
@media screen\9 { } | |
/* IE6/7/8 (via Keith Clarke) */ | |
@media \0screen\,screen\9 {} | |
/* IE8 (via Keith Clarke) */ | |
@media \0screen { } | |
/* IE8/9 */ | |
@media screen\0 { } | |
/** | |
* IE demo | |
* 打个比方,如果你的body中设置了一个红色的背景,而想让不同版本IE变成别的颜色, | |
* 那么我们就可以这么操作 | |
*/ | |
body { | |
background: red; | |
} | |
/* IE6、IE7变成绿色 */ | |
@media all\9 { | |
body { | |
background: green; | |
} | |
} | |
/* IE8变成蓝色 */ | |
@media \0screen { | |
body { | |
background: blue; | |
} | |
} | |
/*IE9和IE10变成黄色*/ | |
@media screen and (min-width:0\0) { | |
body { | |
background: yellow; | |
} | |
} | |
/* Samsung Galaxy (portrait) */ | |
@media screen and (max-width: 385px) { | |
} | |
/* Samsung Galaxy (landscape) */ | |
@media screen and (max-width: 690px) { | |
} | |
/* iPhone and other smartphones (portrait) */ | |
@media screen and (max-device-width: 320px) { | |
} | |
/* iPhone and other smartphones (landscape) */ | |
@media screen and (max-device-width: 480px) { | |
} | |
/* iPad and other tablets (portrait) */ | |
@media screen and (max-device-width: 768px) { | |
} | |
/* iPad and other tablets (landscape) */ | |
@media screen and (max-device-width: 1024px) { | |
} | |
/* iPhone 5 (portrait) */ | |
@media screen and (max-device-width: 568px) and (orientation: portrait) { | |
} | |
/* iPhone 5 (landscape) */ | |
@media screen and (max-device-width: 568px) and (orientation: landscape) { | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment