[乐意黎转载 ]BROWSE RHACKS 浏览器的钩子
来源:互联网 发布:盐和避难所 mac 编辑:程序博客网 时间:2024/06/06 13:17
Android
Selector Hacks
WebKit
.selector:not(*:root) {}
- Chrome *
- Safari *
- Opera ≥ 14
- Android *
JavaScript Hacks
var isChromium = !!window.chrome;
- Chrome *
- Opera ≥ 14
- Android 4.0.4
Media Query Hacks
@media screen and (min-width:0\0) {}
- Internet Explorer/Edge ≥ 9
- Safari 4
- Android ≥ 2.3
Chrome
Selector Hacks
WebKit
.selector:not(*:root) {}
- Chrome *
- Safari *
- Opera ≥ 14
- Android *
Supports Hacks
@supports (-webkit-appearance:none) {}
- Chrome ≥ 28
- Safari ≥ 9
- Internet Explorer/Edge >= 12
- 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
- Android 4.0.4
Webkit
var isWebkit = 'WebkitAppearance' in document.documentElement.style;
- Chrome *
- Safari ≥ 3
- Opera ≥ 14
var isChrome = !!window.chrome && !!window.chrome.webstore;
Media Query Hacks
@media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) { .selector {} }
Firefox
Selector Hacks
body:last-child .selector, x:-moz-any-link {}
Media Query Hacks
Selector Hacks
body:last-child .selector, x:-moz-any-link, x:default {}
body:not(:-moz-handler-blocked) .selector {}
Media Query Hacks
@media screen and (-moz-images-in-menus:0) {}
@media screen and (min--moz-device-pixel-ratio:0) {}
Selector Hacks
_::-moz-progress-bar, body:last-child .selector {}
Media Query Hacks
@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) {}
@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) {} }
Supports Hacks
@supports (-moz-appearance:meterbar) {}
Selector Hacks
_::-moz-range-track, body:last-child .selector {}
Supports Hacks
@supports (-moz-appearance:meterbar) and (display:flex) {}
@supports (-moz-appearance:meterbar) and (cursor:zoom-in) {}
@supports (-moz-appearance:meterbar) and (background-attachment:local) {}
@supports (-moz-appearance:meterbar) and (image-orientation:90deg) {}
@supports (-moz-appearance:meterbar) and (all:initial) {}
@supports (-moz-appearance:meterbar) and (list-style-type:japanese-formal) {}
Media Query Hacks
@media all and (min--moz-device-pixel-ratio:0) and (min-resolution: 3e1dpcm) {}
Supports Hacks
@supports (-moz-appearance:meterbar) and (background-blend-mode:difference,normal) {}
JavaScript Hacks
var isFF = !!window.sidebar;
Selector Hacks
_:-moz-tree-row(hover), .selector {}
JavaScript Hacks
var isFF = 'MozAppearance' in document.documentElement.style;
var isFF = !!navigator.userAgent.match(/firefox/i);
var isFF = typeof InstallTrigger !== 'undefined';
var isFF = !!window.globalStorage;
var isFF = (function x(){})[-6]=='x';
var isFF = (function x(){})[-5]=='x';
Miscellaneous
@-moz-document url-prefix() {}
Selector Hacks
Everything but Firefox and Internet Explorer ≤8
_::selection, .selector:not([attr*='']) {}
- Internet Explorer/Edge ≤ 8
- Firefox *
Internet explorer/edge
Supports Hacks
@supports (-webkit-appearance:none) {}
- Chrome ≥ 28
- Safari ≥ 9
- Internet Explorer/Edge >= 12
- Opera ≥ 14
Selector Hacks
.unused-class can be any unused class
* html .selector {}.unused-class.selector {}
- Internet Explorer/Edge ≤ 6
Everything but Internet Explorer 6
html > body .selector {}
.selector, {}
- Internet Explorer/Edge ≤ 7
*:first-child+html .selector {}.selector, x:-IE7 {}*+html .selector {}body*.selector {}
.selector\ {}
- Internet Explorer/Edge ≤ 7
Everything but Internet Explorer ≤7
html > body .selector {}head ~ body .selector {}
- Internet Explorer/Edge ≤ 7
Everything but Firefox and Internet Explorer ≤8
_::selection, .selector:not([attr*='']) {}
- Internet Explorer/Edge ≤ 8
- Firefox *
Everything but Internet Explorer ≤8
:root .selector {}body:last-child .selector {}body:nth-of-type(1) .selector {}body:first-of-type .selector {}.selector:not([attr*='']) {}
- Internet Explorer/Edge ≤ 8
Property/Value Hacks
.selector { _property: value; }.selector { -property: value; }
.selector { property: value\9; }.selector { property: value\9; }
- Internet Explorer/Edge 6-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/Edge ≤ 7
Acts as an !important; string after ! can be anything
.selector { property: value !ie; }
- Internet Explorer/Edge ≤ 7
Media Query Hacks
@media screen\9 {}
- Internet Explorer/Edge ≤ 7
@media \0screen\,screen\9 {}
- Internet Explorer/Edge ≤ 8
@media screen and (min-width:0\0) {}
- Internet Explorer/Edge ≥ 9
- Safari 4
- Android ≥ 2.3
Selector Hacks
_:-ms-input-placeholder, :root .selector {}
- Internet Explorer/Edge ≥ 10
_:-ms-fullscreen, :root .selector {}
- Internet Explorer/Edge ≥ 11
Media Query Hacks
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {}
- Internet Explorer/Edge ≥ 10
Everything but Internet Explorer and Safari ≤6
@media screen { @media (min-width: 0px) {} }
- Internet Explorer/Edge *
- Safari ≤ 6
JavaScript Hacks
Check for Internet Explorer version
var ieVersion = 0;
- Internet Explorer/Edge 3-10
var isIE = document.all && !window.XMLHttpRequest;
- Internet Explorer/Edge ≤ 6
var isIE = !!window.ActiveXObject;
- Internet Explorer/Edge 6-10
var isIE = document.all && document.compatMode;
- Internet Explorer/Edge 6-10
var isIE = document.all && !document.querySelector;
- Internet Explorer/Edge ≤ 7
var isIE = document.all && window.XMLHttpRequest && !document.querySelector;
var isIE = document.all && window.XMLHttpRequest;
- Internet Explorer/Edge 7-10
var isIE = navigator.appVersion.indexOf("MSIE 7.") !== -1;
var isIE = !+'\v1';
- Internet Explorer/Edge ≤ 8
var isIE = '\v'=='v';
- Internet Explorer/Edge ≤ 8
var isIE = document.all && document.querySelector;
- Internet Explorer/Edge 8-10
var isIE = document.all && !document.addEventListener;
- Internet Explorer/Edge ≤ 8
var isIE = document.all && document.querySelector && !document.addEventListener;
var isIE = document.all && document.addEventListener;
- Internet Explorer/Edge 9-10
var isIE = document.all && document.addEventListener && !window.atob;
var isIE = document.all && !window.atob;
- Internet Explorer/Edge ≤ 9
var isIE = false;
- Internet Explorer/Edge ≤ 10
var isIE = document.all && window.atob;
- Internet Explorer/Edge 10
Check for Internet Explorer version
var ieVersion = (function() { if (new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})").exec(navigator.userAgent) != null) { return parseFloat( RegExp.$1 ); } else { return false; } })();
- Internet Explorer/Edge ≤ 10
var isIE = eval("false") && document.documentMode === 10;
- Internet Explorer/Edge 10
var isIE = document.body.style.msTouchAction !== undefined;
- Internet Explorer/Edge ≥ 10
var isIE = window.navigator.msPointerEnabled;
- Internet Explorer/Edge ≥ 10
var isIE = 'behavior' in document.documentElement.style && '-ms-user-select' in document.documentElement.style;
- Internet Explorer/Edge 10
var isIE = '-ms-scroll-limit' in document.documentElement.style && '-ms-ime-align' in document.documentElement.style;
- Internet Explorer/Edge 11
Conditional comments
- Internet Explorer/Edge 6-9
- Internet Explorer/Edge 6-9
- Internet Explorer/Edge 6-9
- Internet Explorer/Edge ≤ 9
Everything but Internet Explorer ≤9
Everything but Internet Explorer ≤9
- Internet Explorer/Edge ≤ 9
Opera
Selector Hacks
WebKit
.selector:not(*:root) {}
- Chrome *
- Safari *
- Opera ≥ 14
- Android *
Supports Hacks
@supports (-webkit-appearance:none) {}
- Chrome ≥ 28
- Safari ≥ 9
- Internet Explorer/Edge >= 12
- 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
- Android 4.0.4
Webkit
var isWebkit = 'WebkitAppearance' in document.documentElement.style;
- Chrome *
- Safari ≥ 3
- Opera ≥ 14
Selector Hacks
html:first-child .selector {}
JavaScript Hacks
var isOpera = /^function \(/.test([].sort);
Selector Hacks
_:-o-prefocus, body:last-child .selector {}
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) {}
JavaScript Hacks
Replace X by the version
var isOpera = window.opera && window.opera.version() == X;
var isOpera = !!window.opera;
Media Query Hacks
@media (min-resolution: .001dpcm) { _:-o-prefocus, .selector {} }
JavaScript Hacks
var isOpera = !!window.opera || /opera|opr/i.test(navigator.userAgent);
Selector Hacks
*|html[xmlns*=""] .selector {}
Media Query Hacks
@media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) { .selector {} }
Opera mini
JavaScript Hacks
var isOperaMini = Object.prototype.toString.call(window.operamini) === '[object OperaMini]';
var isOperaMini = (navigator.userAgent.indexOf('Opera Mini') > -1);
Safari
Selector Hacks
WebKit
.selector:not(*:root) {}
- Chrome *
- Safari *
- Opera ≥ 14
- Android *
Supports Hacks
@supports (-webkit-appearance:none) {}
- Chrome ≥ 28
- Safari ≥ 9
- Internet Explorer/Edge >= 12
- Opera ≥ 14
Property/Value Hacks
.selector { (;property: value;); }.selector { [;property: value;]; }
- Chrome ≤ 28
- Safari ≤ 7
- Opera ≥ 14
JavaScript Hacks
Webkit
var isWebkit = 'WebkitAppearance' in document.documentElement.style;
- Chrome *
- Safari ≥ 3
- Opera ≥ 14
Media Query Hacks
@media screen and (min-width:0\0) {}
- Internet Explorer/Edge ≥ 9
- Safari 4
- Android ≥ 2.3
Everything but Internet Explorer and Safari ≤6
@media screen { @media (min-width: 0px) {} }
- Internet Explorer/Edge *
- Safari ≤ 6
Selector Hacks
html:first-child .selector {}
html[xmlns*=""] body:last-child .selector {}html[xmlns*=""]:root .selector {}
*|html[xmlns*=""] .selector {}
_::-moz-svg-foreign-content, :root .selector {}
JavaScript Hacks
var isSafari = /a/.__proto__=='
var isSafari = /constructor/i.test(window.HTMLElement);
var isSafari = !!navigator.userAgent.match(/safari/i) && !navigator.userAgent.match(/chrome/i) && typeof document.body.style.webkitFilter !== "undefined" && !window.chrome;
Media Query Hacks
原文地址: http://browserhacks.com/