Turn: Collect the hack writing methods of various browsers

CollectHackWriting Method

 

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

1. Firefox

The new identification code added by the black body to adapt to the browser

@-Moz-document URL-prefix (){

. Selector {

Property: value;

}

}

Firefox supports the following methods:

# Selector[ID = selector]{// ID Selector

Property: value;

} Or:

@-Moz-document URL-prefix (){

. Selector {

Property: value;

}

}

*>. 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.

Instance:

@ Media screen and
(-WebKit-Min-device-pixel-ratio: 0 ){

. Demo {

Color: # f36;

}

}

3. Opera Browser

HTML: First-Child> bodySelector
{

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 ~ BodySelector {

Property:
Value;

}

}
The above is the hack Statement of operabrowser.

Instance:

@ 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

: RootSelector {

Property: value9;

}
The above is ie9.

Instance:

: Root. Demo {

Color: # ff09;

}
5. ie9 and earlier ie9 versions

Selector {

Property: Value9;

}
This method can only be identified by ie9 and earlier versions of ie9. Note that "9" can only be "9" and cannot be anything else. Otherwise, the effect will be lost, 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

* + HtmlSelector {

Property: value;

}

Or

*: First-Child + htmlSelector {

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:

* HtmlSelector {

Property: value;

}
Instance:

. 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, we mainly write hack statements for different browsers.There are two types:SlaveCSS SelectorAndCSS attributesDifferent hack writing methods. Let's take a look at the two different methods:

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 about CSS in various browsers, based on safari, Google
Chrome and Firefox, but also for our front-end staff the most annoying IE6-9 version of the browser's hack writing, and these hack we are divided into CSS
Specifies the hack writing method of the selector and the hack writing method of CSS attributes. However, you can decide the specific application based on your needs. The following lists my two methods:

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

. Demo {

Color: red;

Color: green9;

Color: lime;

* Color: red;

+ Color: blue;

_ Color: orange;

}

@ Media all and
(Min-width: 0px ){

Color: #000;

}

@ Media screen and
(-WebKit-Min-device-pixel-ratio: 0 ){

Color: # f36;

}

@ Media all and
(-Wekit-Min-device-pixel-ratio: 10000), not all and
(-WebKit-Min-device-pixel-ratio: 0) {head ~ Body. Demo

{

Color: #369;

}

}

@-Moz-document URL-prefix (){

. Demo {

Color: # CCC;

}

}
Ii. perfectionist writing
This method is a perfect writing method. It mainly works with the IE condition annotation mentioned in the previous section,All using 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 ;}

. Non-ie. Demo {color: red ;}

. Ie9. Demo {color: yellow ;}

. IE8. Demo {color: green ;}

. IE7. Demo
{Color: orange ;}

. IE6. Demo {color: lime ;}

@ Media all and
(Min-width: 0px) {. Demo {color: black ;}}

@ Media screen and
(-WebKit-Min-device-pixel-ratio: 0) {. Demo {color: #369 ;}}

@ Media all
And (-WebKit-Min-device-pixel-ratio: 10000), not all and
(-WebKit-Min-device-pixel-ratio: 0) {head ~ Body. Demo {color: # cf6 ;}}

@-Moz-document URL-prefix () {. Demo {color: #963;}/* Firefox */
}