The most complete browser CSS & JS Hack Handbook in the History of "Essentials" (RPM)

Browsers render pages differently, or even different versions of the same browser ("Outstanding representatives" are IE). As a result, browser compatibility is an essential skill for front-end developers. If there is a browser Hack manual, it is much easier to query. This article will share with you the various browser-specific CSS & JavaScript Hack that browserhacks help us collect from the web, and remember to recommend and share them!

Mobile phone iphone Media query Hack

/** Media query for IPhone 4/4s * If targeting 2g/3g/3gs/4/4s, then remove "-webkit-min-device-pixel-ratio:2" media qu ery condition. */@media only screen and (DEVICE-ASPECT-RATIO:2/3) and (-webkit-device-pixel-ratio:2) and (Orientation:po rtrait){}/** Media query for IPhone 5/5s*/@media only screen and (DEVICE-ASPECT-RATIO:40/71) and (-webkit-min-device-pixel-ratio:2) and (Orientatio n:portrait){}/** Media query for IPhone 6*/@media only screen and (device-aspect-ratio:667/375) and (-webkit-min-device-pixel-ratio:2) and (Orientat ion:portrait){/*STYLES GO here*/}/** Media query for IPhone 6+*/@media only screen and (DEVICE-ASPECT-RATIO:16/9) and (-webkit-device-pixel-ratio:3) and (Orientation:po rtrait){/*STYLES GO here*/}

Reproduced below from: http://websqq.org/archives/1428, http://websqq.org/archives/1161

IE Selector Hack

/*IE 6 and below*/* HTML. Selector{}. Suckyie6.selector{}/*. Suckyie6 can be any unused class*//*IE 7 and below*/. Selector,{}/*IE 7*/*:first-child+html. Selector{}. Selector, X:-ie7{}*+html. Selector{}/*Everything but IE 6*/HTML > body. Selector{}/*Everything but IE 6/7*/HTML >/**/body. Selector{}Head ~/* */body. Selector{}/*Everything but IE 6/7/8*/: Root *>. selector{}body:last-child. Selector{}Body:nth-of-type (1). Selector{}Body:first-of-type. Selector{}

IE attribute/value Hack

/*IE 6*/. Selector{_color:Blue; }. Selector{-color:Blue; }/*IE 6/7-Acts as an!important*/. Selector{Color:Blue!ie; }/*string after! can be anything*//*IE 6/7-Any combination of these characters:! $ & * () =% + @,./' [] # ~?: < > |*/. Selector{!color:Blue; }. Selector{$color:Blue; }. Selector{&color:Blue; }. Selector{*color:Blue; }/* ... *//*IE 8/9*/. Selector{Color:blue\0/; }/*must go at the END of all rules*//*IE 8/9*/. Selector{Color:blue\0/; }/*must go at the END of all rules*//*IE 9/10*/. Selector:nth-of-type (1n){Color:blue\9; }/*IE 6/7/8/9/10*/. Selector{Color:blue\9; }. Selector{Color/*\**/:blue\9; }/*Everything but IE 6*/. Selector{Color/**/:Blue; }

IE Media Query Hack

/*IE 6/7*/@media screen\9{}/*IE 8*/@media \0screen{}/*IE 9/10, Firefox 3.5+, Opera*/@media screen and (min-resolution: +72dpi){}/*IE + +*/@media screen and (-ms-high-contrast:active), (-ms-high-contrast:none){}/*IE 6/7/8*/@media \0screen\,screen\9{}/*IE 8/9/10 & Opera*/@media screen\0{}/*IE 9/10*/@media screen and (min-width:0\0){}/*Everything but IE 6/7/8*/@media screen and (min-width:400px){}

IE Javascript Hack

/*IE 6*/(Checkie= Document.createelement ("B")). InnerHTML = "<!--[if IE 6]><i></i><! [endif]--> ";varIsie = Checkie.getelementsbytagname ("i"). length = = 1;/*IE 7*/(Checkie= Document.createelement ("B")). InnerHTML = "<!--[if IE 7]><i></i><! [endif]--> ";varIsie = Checkie.getelementsbytagname ("i"). length = = 1; Navigator.appVersion.indexOf ("MSIE 7.")! =-1/*IE <= 8*/varIsie = ' \v ' = = ' V ';/*IE 8*/(Checkie= Document.createelement ("B")). InnerHTML = "<!--[if IE 8]><i></i><! [endif]--> ";varIsie = Checkie.getelementsbytagname ("i"). length = = 1;/*IE 9*/(Checkie= Document.createelement ("B")). InnerHTML = "<!--[if IE 9]><i></i><! [endif]--> ";varIsie = Checkie.getelementsbytagname ("i"). length = = 1;/*IE Ten*/varIsie = eval ("/*@[email protected]*/false") && Document.documentmode = = = 10;/*IE Ten*/varIsie = document.body.style.msTouchAction! = undefined;

Media Enquiry Hack --firefox,chrome,opera

/*Firefox 3.5+, IE 9/10, Opera*/@media screen and (min-resolution: +72dpi){}
/*Firefox 3.6+*/@media screen and (-moz-images-in-menus:0){}/*Firefox 4+*/@media screen and (min--moz-device-pixel-ratio:0){}/*Chrome, Safari*/@media screen and (-webkit-min-device-pixel-ratio:0){}/*Opera 7*/@media All and (min-width:0px){}/*Opera 12-*/@media All and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0){}/*Opera, Firefox 3.5+, IE 9/10*/@media screen and (min-resolution: +72dpi){}/*Opera, IE 8/9/10*/@media Screen{}

Javascript Hack--firefox,chrome,opera

/*Firefox*/var IsFF =!! Navigator.userAgent.match (/firefox/i);/*Firefox 2-13*/var IsFF = Boolean (window.globalstorage);/*Firefox 2/3*/var IsFF =/a/[-1]== ' a ';/*Firefox 3*/var IsFF = (function x (){}) [ -5]== ' X ';/*Chrome*/var ischrome = Boolean (window.chrome);/*Safari*/var Issafari =/a/.__proto__== '//';/*Opera 9.64-*/var isopera =/^function \ (/.test ([].sort);/*Opera 12-*/var Isopera = Boolean (Window.opera);

Firefox browser selector hack

/* Firefox 1.5 */body:empty selector {}/* Firefox */.selector, x:-moz-any-link {}/* Firefox */.selector, X:-moz-any -link; X:default {}/* Firefox 3.5+ */body:not (:-moz-handler-blocked). Selector {}

Chrome,safari,opera Browser selector Hack

/*Chrome 24-and Safari 5-*/:: made-up-pseudo-element,. Selector{}/*Safari 2/3*/html[xmlns*= ""] body:last-child. Selector{}html[xmlns*= ""]:root. Selector{}/*Safari 2/3.1, Opera 9.25*/*|html[xmlns*= ""]. Selector{}/*Safari 5-and Chrome 24-*/:: made-up-pseudo-element,. Selector{}/*Opera 9.25, Safari 2/3.1*/*|html[xmlns*= ""]. Selector{}/*Opera 9.27 and below, Safari 2*/html:first-child. Selector{}/*Opera 9.5+*/noindex:-o-prefocus,. Selector{}

The most complete browser CSS & JS Hack Handbook in the History of "Essentials" (RPM)