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

Source: Internet
Author: User

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)

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.