Hack writing in various browsers (chrome firefox ie, etc.), hackchrome

Hack writing in various browsers (chrome firefox ie, etc.), hackchrome

Hack is used to write different CSS styles for different browsers, so that different browsers can achieve consistent rendering effects. Therefore, the process of writing different CSS codes for different browsers is as follows, css hack is also called CSS Hack. Then, place the Hack in a specific CSS file of the browser and let the qualified browser parse the code. As mentioned above, we put the CSS Hack code into the condition style file, if the browser meets the requirements, it will resolve the issue. Otherwise, it will not resolve the issue to achieve the page rendering effect you need. In a word, using CSS Hack will make part of your CSS code useless, and then use the conditional style to parse the original CSS code in Some browsers, the CSS Hack code replaces the original CSS code in a qualified browser. It is common to use it in IE6. I think everyone has met it. Next let's take a look at all the browser's Hack. In other words, various browsers can identify which CSS statements are used.

The following is my collection of Hack statements for various browsers:

1. Firefox

@-Moz-document url-prefix () {. selector {property: value ;}}
The above is only recognized by the Firefox browser, for example:

@-Moz-document url-prefix () {. demo {color: lime ;}}
Firefox supports the following methods:

/* Supports all firefox versions */# selector [id = selector] {property: value;} Or: @-moz-document url-prefix (){. selector {property: value ;}/ * supports all Gecko kernel browsers (including Firefox) */*>. selector {property: value ;}
2. Webkit chrome and safari)

@ Media screen and (-webkit-min-device-pixel-ratio: 0) {Selector {property: value ;}}
The above code mainly targets Webkit kernels, such as Google Chrome and Safari:

@ Media screen and (-webkit-min-device-pixel-ratio: 0) {. demo {color: # f36 ;}}
3. Opera Browser

Html: first-child> body Selector {property: value;} Or: @ media all and (min-width: 0) {Selector {property: value ;}} or: @ media all and (-webkit-min-device-pixel-ratio: 10000), not all and (-webkit-min-device-pixel-ratio: 0) {head ~ Body Selector {property: value ;}}
The above is the Hack Statement of operabrowser:

@ Media all and (-webkit-min-device-pixel-ratio: 10000), not all and (-webkit-min-device-pixel-ratio: 0) {head ~ Body. demo {background: green ;}}
4. IE9 Browser

: Root Selector {property: value9 ;}
The preceding code is written in IE9. The specific application is as follows:

: Root. demo {color: # ff09 ;}
5. IE9 and earlier IE9 versions

Selector {property: value9 ;}
This writing method can only be identified by IE9 and earlier versions of IE9. Note that "9" can only be "9" and cannot be anything else, such as "8". Otherwise, it will lose the effect, for example:

. Demo {background: lime9 ;}
6. Internet Explorer 8

Selector {property: value/;} Or: @ media screen {Selector {property: value ;}}
Only Internet Explorer can recognize the above Code, for example:

. Color {color: # fff/;} Or: @ media screen {. color {color: # fff ;}}
7. IE8 or later versions

Selector {property: value ;}
This method is only supported by IE8 and later versions, such

. Demo {color: # ff0 ;}
8. Internet Explorer 7

* + Html Selector {property: value;} Or *: first-child + html Selector {property: value ;}
The above two types can be identified in the IE 7 browser, for example:

* + Html. demo {background: green;} Or: *: first-child + html. demo {background: green ;}
9. Internet Explorer 7 or earlier versions

Selector {* property: value ;}
The above code can be identified in IE7 and earlier versions, such:

. Demo {* background: red ;}
10. Internet Explorer 6

Selector {_ property/**/:/**/value;} Or: Selector {_ property: value;} Or: * html Selector {property: value ;}
The specific application is as follows:

. Demo {_ width/**/:/**/100px;} Or:. demo {_ width: 100px;} Or: * html. demo {width: 100px ;}
The above details the various versions of the browser to identify a variety of Hack writing, including the IE6-9 and modern version of the browser writing. Based on the above description, the Hack writing method for different browsers is mainly divided into two different types of Hack writing methods: CSS selector and CSS attribute. Let's take a look at the two different methods:

Hack Writing of CSS Selector
The following describes the support of CSS selectors and CSS attribute selectors in different browsers. The following describes the CSS selector support.

Hack Writing of CSS Selector

1. IE6 and IE6 browsers

* Html. demo {color: green ;}
2. Only Internet Explorer 7

*: First-child + html. demo {color: green ;}
3. All browsers except Internet Explorer 6 (IE7-9, Firefox, Safari, Opera)

Html> body. demo {color: green ;}
4. IE8-9, Firefox, Safari, Opear

Html>/**/body. demo {color: green ;}
5. IE9 +

: Root. demo {color: red ;}
6. Firefox

@-Moz-document url-prefix () {. demo {color: red ;}}
6. Webkit kernel browser (Safari and Google Chrome)

@ Media screen and (-webkit-min-device-pixel-ratio: 0) {. demo {color: red ;}}
7. Opera Browser

@ Media all and (-webkit-min-device-pixel-ratio: 10000), not all and (-webkit-min-device-pixel-ratio: 0) {head ~ Body. demo {color: red ;}}
8. iPhone/mobile webkit

@ Media screen and (max-device-width: 480px) {. demo {color: red }}
CSS attribute Hack writing
1. Internet Explorer 6

. Demo {_ color: red ;}
2. IE6-7 browser Recognition

. Demo {* color: red ;}
3. All browsers except Internet Explorer 6

. Demo {color/**/: red ;}
4. IE6-9 Browser

. Demo {color: red9 ;}
5. IE7-8 Browser

. Demo {color/***/: red9 ;}
The above lists all the Hack statements related to CSS in various browsers, based on the methods for modern browsers such as Safari, Google Chrome, and Firefox, and there are also for our front-end staff hate the IE6-9 of the various versions of the browser's Hack writing, and these Hack we are divided into CSS selector Hack writing method and CSS attributes of the Hack writing. However, you can decide the specific application based on your needs. The following lists my two methods:

I. Economic real-benefit method:
This method focuses on the separate CSS Hack method. Different browsers use different Hack writing methods. In fact, there are many Hack writing methods in IE (because we write Hack mainly for IE browsers), especially for IE 6 browsers. The advantage of writing Hack for various browsers is that it is easy to write Hack for various browsing methods. Because other browsers are mainly for modern browsers, they are relatively small. For the use of such Hack, I recommend the following method:

. Demo {color: red;/* all modern browsers */color: green9;/* all IE browsers */color: lime;/* IE8-9 browsers */* color: red; /* IE6-7 browser */+ color: blue;/* IE7 browser */_ color: orange;/* IE6 browser */} @ media all and (min-width: 0px) {color: #000;/* Webkit and operabrowser */} @ media screen and (-webkit-min-device-pixel-ratio: 0) {color: # f36; /* Webkit kernel browser */} @ media all and (-wekit-min-device-pixel-ratio: 10000), not all and (-webkit-min-device-pixe L-ratio: 0) {head ~ Body. demo {color: #369;}/* Opera */} @-moz-document url-prefix (){. demo {color: # ccc;}/* all firefox */}
Ii. perfectionist writing
This method is a perfect writing method. It mainly works with the IE condition annotation mentioned in the previous section and uses the selector Hack. This method can be written in two steps:

1. Create a condition style table and add the corresponding class name to the body of the HTML file:

<! -[If IE6]-> <! -[If IE7]-> <! -[If IE8]-> <! -[If IE9]-> <! -[If! IE]->
2. Create the corresponding Style

. Demo {color: blue;}/* modern browser */. non-ie. demo {color: red;}/* explorer except IE */. ie9. demo {color: yellow;}/* IE9 browser */. ie8. demo {color: green;}/* IE 8 browser */. ie7. demo {color: orange;}/* IE 7 browser */. ie6. demo {color: lime;}/* IE6 browser */@ media all and (min-width: 0px ){. demo {color: black;}/* webkit and opera */} @ media screen and (-webkit-min-device-pixel-ratio: 0 ){. demo {color: #369;}/* webkit */} @ media all and (-w Ebkit-min-device-pixel-ratio: 10000), not all and (-webkit-min-device-pixel-ratio: 0) {head ~ Body. demo {color: # cf6;}/* opera */} @-moz-document url-prefix (){. demo {color: #963;}/* firefox */}
The above is the Hack method of CSS in various browsers. Let's look at an example:

HTML Markup

Test color

CSS Code

. Demo {color: red;/* all modern browsers */color: green9;/* all IE browsers */color: lime;/* IE8-9 browsers */* color: red; /* IE6-7 browser */+ color: blue;/* IE7 browser */_ color: orange;/* IE6 browser */}: root. demo {color: #9639 ;}@-moz-document url-prefix (){. demo {color: #897;}/* all firefox */} @ media screen and (-webkit-min-device-pixel-ratio: 0 ){. demo {color: #000;}/* webkit */} @ media all and (-webkit-min-device-pixel-ratio: 10000), n Ot all and (-webkit-min-device-pixel-ratio: 0) {head ~ Body. demo {color: red;}/* opera */}
See the final result:
>

Reprinted from http://www.wufangbo.com/css-hack/