Hack, hacker

Hack, hacker
The principle of CSS hack is that different browsers and different versions have different support and resolution results for CSS, and the effect of CSS priority on the display effect of browsers, we can apply different CSS based on different browser scenarios. CSS hack has three forms: CSS attribute prefixes, selector prefixes, and IE condition comments (if IE is referenced in the HTML header) Hack, in actual projects, most CSS Hack is introduced for the performance differences between different versions of IE browsers. Attribute prefixes (that is, internal Hack): for example, IE6 can recognize underscores (_) and star numbers (*). IE7 can recognize asterisks (*) but cannot recognize underscores "_", IE6 ~ IE10 knows "\ 9", but none of firefox's three mentioned above. Selector prefix method (I .e. selector Hack): for example, IE6 can recognize * html. class {}, IE7 can recognize * + html. class {} Or *: first-child + html. class {}. IE condition annotation method (HTML condition annotation Hack): For all IE (Note: IE10 + no longer supports condition annotation): <! -- [If IE]> content displayed in IE <! [Endif] --> for IE6 and earlier versions: <! -- [If lt IE 6]> only content displayed in IE6 <! [Endif] -->. This type of Hack not only takes effect for CSS, but also for all code written in the judgment statement.The CSS hack writing sequence is generally defined in front of CSS with a wide range of applicability and strong recognition capabilities.CSS hack Method 1: Conditional annotation is a proprietary Hack method of IE browser, which is officially recommended by Microsoft. The example below takes effect only in IE <! -- [If IE]> This text is only displayed in IE browser <! [Endif] --> only effective under IE6 <! -- [If IE 6]> This text is only displayed in IE 6 browser <! [Endif] --> only available in IE6 or later versions <! -- [If gte IE 6]> This text is only displayed in IE 6 or later versions <! [Endif] --> it only takes effect on IE8 <! -- [If! IE 8]> This text is displayed in a non-IE8 browser <! [Endif] --> valid for non-ie browsers <! -- [If! IE]> This text is only displayed in a non-IE browser <! [Endif] --> CSS hack Method 1: in standard mode, "-" minus signs are the proprietary hack "\ 9" IE6/IE7/IE8/IE9/IE10 of IE6. Both "\ 0" IE8/IE9/IE10 "take effect. effective, the hack "\ 9 \ 0" of IE8/9/10 takes effect only for IE9/IE10. The hack CSS hack mode of IE9/10 is three: the selector prefix method the selector prefix method is used for hack in browsers with inconsistent page performance or special treatment. Currently, the most common issue is that * html * prefixes only apply to IE6 * + html * + prefixes only apply to IE7 @ media screen \ 9 {...} valid only for IE6/7 @ media \ 0 screen {body {background: red;} Only for IE8 @ media \ 0screen \, screen \ 9 {body {background: blue ;}} only valid for IE6/7/8 @ media screen \ 0 {body {background: green;} only valid for IE8/9/10 @ media screen and (min-width: 0 \ 0) {body {background: gray;} is valid only for IE9/10 @ media screen and (-ms-high-contrast: active ), (-ms-high-contrast: none) {bod Y {background: orange;} is only valid for IE10 CSS3 selector combined with JavaScript Hack. We use IE10 For example: Because IE10 user proxy string (UserAgent) is: Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; Trident/6.0), so we can use javascript to add this attribute to the document tag, and then use the CSS3 basic selector to match. JavaScript code: var htmlObj = document.doc umentElement; htmlObj. setAttribute ('data-useragent', navigator. userAgent); htmlObj. setAttribute ('data-Platform', navigator. platform); CSS3 matching code: html [data-useragent * = 'msie 000000'] # id {color: # F00;} Firefox browser, Webkit kernel browser, and Opera Browser css hackCss hack in Firefox@-Moz-document url-prefix () {. selector {property: value ;}}Supports all Gecko kernel browsers (including Firefox)*>. Selector {property: value ;}Webkit kernel browser css hack@ Media screen and (-webkit-min-device-pixel-ratio: 0) {Selector {property: value ;}}Css hack in Opera BrowserHtml: first-child> B \ ody Selector {property: value;} @ media all and (-webkit-min-device-pixel-ratio: 10000 ), not and all (-webkit-min-device-pixel-ratio: 0 ){. font1 {color: red ;}}Webkit kernel browser css hack and Opera Browser css hack@ Media all and (min-width: 0px ){. font1 {color: red;} css hack for mobile development in android2 + versions, a bug occurs in the button border and needs to be cleared. The solution is as follows: a, button, input {-webkit-tap-highlight-color: rgba (, 0,);}/* 1. remove the border generated when the android a/button/input tag is clicked. 2. remove the translucent gray background generated when the ios a tag is clicked */use-webkit-transform-3d properties because Android4.0 does not recognize this selector, when the browser parses the code, this step will be skipped directly in the compatibility of CSS3. I believe everyone is familiar with the compatibility with media. I have mentioned it many times before, so the hack used today is also inseparable from it, the Code is as follows: @ media all and (-webkit-transform-3d) {/* Android4.0 does not recognize this-webkit-transform-3d, use it to do Android4.0 version compatible */. css {...}}