各种各样的hack。

http://itakeo.com/blog/2015/11/16/allhack/?none=123

 

 Android

Selector Hacks

.selector:not(*:root) {}

• Chrome*
 
• Safari*
 
• Opera≥ 14
 
• Android*

 

JavaScript Hacks

var isChromium =!!window.chrome;

• Chrome*
 
• Opera≥ 14
 
• Android4.0.4

 

Media Query Hacks

@media screen and (min-width:0\0) {}

• Internet Explorer≥ 9
 
• Safari4
 
• Android≥ 2.3

 

 

 Chrome

Selector Hacks

.selector:not(*:root) {}

• Chrome*
 
• Safari*
 
• Opera≥ 14
 
• Android*

 

Supports Hacks

@supports (-webkit-appearance:none) {}

• Chrome≥ 28
 
• Opera≥ 14

 

Property/Value Hacks

.selector { (;property: value;);}.selector { [;property: value;];}

• Chrome≤ 28
 
• Safari≤ 7
 
• Opera≥ 14

 

JavaScript Hacks

var isChromium =!!window.chrome;

• Chrome*
 
• Opera≥ 14
 
• Android4.0.4

 

var isWebkit ='WebkitAppearance'in document.documentElement.style;

• Chrome*
 
• Safari≥ 3
 
• Opera≥ 14

 

var isChrome =!!window.chrome &&!!window.chrome.webstore;

• Chrome≥ 14

 

Media Query Hacks

@media \\0 screen {}

• Chrome22-28
 
• Safari≥ 7

 

@media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) {.selector {}}

• Chrome≥ 29
 
• Opera≥ 16

 

 Firefox

Selector Hacks

body:empty .selector {}

• firefox1.5/2

 

body:last-child .selector, x:-moz-any-link {}

• firefox≥ 2

 

body:last-child .selector, x:-moz-any-link, x:default {}

• firefox≥ 3

 

body:not(:-moz-handler-blocked) .selector {}

• firefox≥ 3.5

 

_::-moz-progress-bar, body:last-child .selector {}

• firefox≥ 6

 

_::-moz-range-track, body:last-child .selector {}

• firefox≥ 21

 

_:-moz-tree-row(hover), .selector {}

• firefox*

 

_::selection, .selector:not([attr*='']) {}

• Internet Explorer≤ 8
 
• firefox*

 

Supports Hacks

@supports (-moz-appearance:meterbar) {}

• firefox≥ 16

 

@supports (-moz-appearance:meterbar) and (display:flex) {}

• firefox≥ 22

 

@supports (-moz-appearance:meterbar) and (cursor:zoom-in) {}

• firefox≥ 24

 

@supports (-moz-appearance:meterbar) and (background-attachment:local) {}

• firefox≥ 25

 

@supports (-moz-appearance:meterbar) and (image-orientation:90deg) {}

• firefox≥ 26

 

@supports (-moz-appearance:meterbar) and (all:initial) {}

• firefox≥ 27

 

@supports (-moz-appearance:meterbar) and (list-style-type:japanese-formal) {}

• firefox≥ 28

 

@supports (-moz-appearance:meterbar) and (background-blend-mode:difference,normal) {}

• firefox≥ 30

 

JavaScript Hacks

var isFF =!!window.sidebar;

• firefox*

 

var isFF ='MozAppearance'in document.documentElement.style;

• firefox*

 

var isFF =!!navigator.userAgent.match(/firefox/i);

• firefox*

 

var isFF =typeof InstallTrigger !=='undefined';

• firefox≥ 1.5

 

var isFF =!!window.globalStorage;

• firefox2-13

 

var isFF =/a/[-1]=='a';

• firefox2-3

 

var isFF =(function x(){})[-6]=='x';

• firefox2

 

var isFF =(function x(){})[-5]=='x';

• firefox3

 

Media Query Hacks

@media \0 all {}

• firefox≤ 3

 

@media screen and (-moz-images-in-menus:0) {}

• firefox≥ 3.6

 

@media screen and (min--moz-device-pixel-ratio:0) {}

• firefox≥ 4

 

@media all and (min--moz-device-pixel-ratio:0) and (min-resolution: .001dpcm) {}@media all and (-moz-images-in-menus:0) and (min-resolution: .001dpcm) {}

• firefox≥ 8

 

@media all and (min--moz-device-pixel-ratio:0) {@media (min-width: 0px) {}}@media all and (-moz-images-in-menus:0) {@media (min-width: 0px) {}}

• firefox≥ 11

 

@media all and (min--moz-device-pixel-ratio:0) and (min-resolution: 3e1dpcm) {}

• firefox≥ 29

 

Miscellaneous

@-moz-document url-prefix() {}

• firefox≥ 3

 

 Internet Explorer

Selector Hacks

* html .selector {}.unused-class.selector {}

• Internet Explorer≤ 6

 

html > body .selector {}

• Internet Explorer6

 

*:first-child+html .selector {}.selector, x:-IE7 {}*+html .selector {}body*.selector {}

• Internet Explorer7

 

.selector\ {}

• Internet Explorer≤ 7

 

html >/**/body .selector {}head ~ /**/body .selector {}

• Internet Explorer≤ 7

 

.selector, {}

• Internet Explorer≤ 7

 

_::selection, .selector:not([attr*='']) {}

• Internet Explorer≤ 8
 
• firefox*

 

:root .selector {}body:last-child .selector {}body:nth-of-type(1) .selector {}body:first-of-type .selector {}.selector:not([attr*='']) {}

• Internet Explorer≤ 8

 

html[lang='\en'] .selector {}

• Internet Explorer≤ 9

 

_:-ms-input-placeholder, :root .selector {}

• Internet Explorer≥ 10

 

_:-ms-fullscreen, :root .selector {}

• Internet Explorer≥ 11

 

Property/Value Hacks

.selector { _property: value;}.selector {-property: value;}

• Internet Explorer6

 

.selector {property: value\9;}.selector { property/*\**/: value\9;}

• Internet Explorer6-8

 

Any combination of these characters: ! $ & * ( ) = % + @ , . / ` [ ] # ~ ? : < > |

.selector { !property: value;}.selector { $property: value;}.selector {&property: value;}.selector { *property: value;}.selector { )property: value;}.selector { =property: value;}.selector { %property: value;}.selector { +property: value;}.selector { @property: value;}.selector { ,property: value;}.selector { .property: value;}.selector { /property: value;}.selector { `property: value;}.selector { ]property: value;}.selector { #property: value;}.selector { ~property: value;}.selector { ?property: value;}.selector {:property: value;}.selector { |property: value;}

• Internet Explorer≤ 7

 

.selector {property: value !ie;}

• Internet Explorer≤ 7

 

JavaScript Hacks

查看IE版本

var ieVersion =/*@cc_on (function() {switch(@_jscript_version) {case 1.0: return 3; case 3.0: return 4; case 5.0: return 5; case 5.1: return 5; case 5.5: return 5.5; case 5.6: return 6; case 5.7: return 7; case 5.8: return 8; case 9: return 9; case 10: return 10;}})() || @*/0;

• Internet Explorer3-10

 

var isIE = document.all &&!window.XMLHttpRequest;

• Internet Explorer≤ 6

 

var isIE =!!window.ActiveXObject;

• Internet Explorer6-10

 

var isIE = document.all && document.compatMode;

• Internet Explorer6-10

 

var isIE = document.all &&!document.querySelector;

• Internet Explorer≤ 7

 

var isIE = document.all && window.XMLHttpRequest &&!document.querySelector;

• Internet Explorer7

 

var isIE = document.all && window.XMLHttpRequest;

• Internet Explorer7-10

 

var isIE = navigator.appVersion.indexOf("MSIE 7.")!==-1;

• Internet Explorer7

 

var isIE =!+'\v1';

• Internet Explorer≤ 8

 

var isIE ='\v'=='v';

• Internet Explorer≤ 8

 

var isIE = document.all && document.querySelector;

• Internet Explorer8-10

 

var isIE = document.all &&!document.addEventListener;

• Internet Explorer≤ 8

 

var isIE = document.all && document.querySelector &&!document.addEventListener;

• Internet Explorer8

 

var isIE = document.all && document.addEventListener;

• Internet Explorer9-10

 

var isIE = document.all && document.addEventListener &&!window.atob;

• Internet Explorer9

 

var isIE = document.all &&!window.atob;

• Internet Explorer≤ 9

 

var isIE =/*@cc_on!@*/false;

• Internet Explorer≤ 10

 

var isIE = document.all && window.atob;

• Internet Explorer10

 

查看IE版本

var ieVersion =(function(){if(new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})").exec(navigator.userAgent)!=null){return parseFloat( RegExp.$1);}else{returnfalse;}})();

• Internet Explorer≤ 10

 

var isIE = eval("/*@cc_on!@*/false")&& document.documentMode ===10;

• Internet Explorer10

 

var isIE = document.body.style.msTouchAction !== undefined;

• Internet Explorer≥ 10

 

var isIE = window.navigator.msPointerEnabled;

• Internet Explorer≥ 10

 

var isIE ='behavior'in document.documentElement.style &&'-ms-user-select'in document.documentElement.style;

• Internet Explorer10

 

var isIE ='-ms-scroll-limit'in document.documentElement.style &&'-ms-ime-align'in document.documentElement.style;

• Internet Explorer11

 

Media Query Hacks

@media screen\9 {}

• Internet Explorer≤ 7

 

@media \0screen\,screen\9 {}

• Internet Explorer≤ 8

 

@media \0screen {}

• Internet Explorer8

 

@media screen and (min-width:0\0) {}

• Internet Explorer≥ 9
 
• Safari4
 
• Android≥ 2.3

 

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {}

• Internet Explorer≥ 10

 

@media screen {@media (min-width: 0px) {}}

• Internet Explorer*
 
• Safari≤ 6

 

Conditional comments

<!--[if IE 6]> Internet Explorer 6 <![endif]--><!--[if IE 7]> Internet Explorer 7 <![endif]--><!--[if IE 8]> Internet Explorer 8 <![endif]--><!--[if IE 9]> Internet Explorer 9 <![endif]-->

• Internet Explorer6-9

 

<!--[if lte IE 6]> Internet Explorer 6 or less <![endif]--><!--[if lte IE 7]> Internet Explorer 7 or less <![endif]--><!--[if lte IE 8]> Internet Explorer 8 or less <![endif]--><!--[if lte IE 9]> Internet Explorer 9 or less <![endif]-->

• Internet Explorer6-9

 

<!--[if gte IE 6]> Internet Explorer 6 or greater <![endif]--><!--[if gte IE 7]> Internet Explorer 7 or greater <![endif]--><!--[if gte IE 8]> Internet Explorer 8 or greater <![endif]--><!--[if gte IE 9]> Internet Explorer 9 or greater <![endif]-->

• Internet Explorer6-9

 

<!--[if IE]> Internet Explorer 9- <![endif]-->

• Internet Explorer≤ 9

 

<!--[if !IE]><!--> Everything but Internet Explorer ≤9 <!--<![endif]-->

• Internet Explorer≤ 9

 

 Opera

Selector Hacks

*|html[xmlns*=""] .selector {}

• Safari2/3.1
 
• Opera9.25

 

html:first-child .selector {}

• Opera≤ 9.27
 
• Safari2

 

_:-o-prefocus, body:last-child .selector {}

• Opera≥ 9.5

 

@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) {}

• Opera≤ 11

 

.selector:not(*:root) {}

• Chrome*
 
• Safari*
 
• Opera≥ 14
 
• Android*

 

Supports Hacks

@supports (-webkit-appearance:none) {}

• Chrome≥ 28
 
• Opera≥ 14

 

Property/Value Hacks

.selector { (;property: value;);}.selector { [;property: value;];}

• Chrome≤ 28
 
• Safari≤ 7
 
• Opera≥ 14

 

JavaScript Hacks

var isOpera =/^function \(/.test([].sort);

• Opera≤ 9.64

 

var isOpera = window.opera && window.opera.version()== X;

• Opera≤ 12

 

var isOpera =!!window.opera;

• Opera≤ 12.16

 

var isChromium =!!window.chrome;

• Chrome*
 
• Opera≥ 14
 
• Android4.0.4

 

var isWebkit ='WebkitAppearance'in document.documentElement.style;

• Chrome*
 
• Safari≥ 3
 
• Opera≥ 14

 

var isOpera =!!window.opera ||/opera|opr/i.test(navigator.userAgent);

• Opera*

 

Media Query Hacks

@media (min-resolution: .001dpcm) {_:-o-prefocus, .selector {}}

• Opera≥ 12

 

@media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) {.selector {}}

• Chrome≥ 29
 
• Opera≥ 16

 

 Opera Mini

JavaScript Hacks

div isOperaMini = Object.prototype.toString.call(window.operamini)==='[object OperaMini]';

• Opera Mini*

 

var isOperaMini =(navigator.userAgent.indexOf('Opera Mini')>-1);

• Opera Mini*

 

 Safari

Selector Hacks

.selector:not(*:root) {}

• Chrome*
 
• Safari*
 
• Opera≥ 14
 
• Android*

 

html:first-child .selector {}

• Opera≤ 9.27
 
• Safari2

 

html[xmlns*=""] body:last-child .selector {}html[xmlns*=""]:root .selector {}

• Safari2-3

 

*|html[xmlns*=""] .selector {}

• Safari2/3.1
 
• Opera9.25

 

_::-moz-svg-foreign-content, :root .selector {}

• Safari5.1-6

 

Property/Value Hacks

.selector { (;property: value;);}.selector { [;property: value;];}

• Chrome≤ 28
 
• Safari≤ 7
 
• Opera≥ 14

 

JavaScript Hacks

var isWebkit ='WebkitAppearance'in document.documentElement.style;

• Chrome*
 
• Safari≥ 3
 
• Opera≥ 14

 

var isSafari =/a/.__proto__=='//';

• Safari≤ 5

 

var isSafari =/constructor/i.test(window.HTMLElement);

• Safari*

 

var isSafari =!!navigator.userAgent.match(/safari/i)&&!navigator.userAgent.match(/chrome/i)&&typeof document.body.style.webkitFilter !=="undefined"&&!window.chrome;

• Safari6

 

Media Query Hacks

@media screen and (min-width:0\0) {}

• Internet Explorer≥ 9
 
• Safari4
 
• Android≥ 2.3

 

@media screen {@media (min-width: 0px) {}}

• Internet Explorer*
 
• Safari≤ 6

 

@media \\0 screen {}

• Chrome22-28
 
• Safari≥ 7