Hack writing methods for each browser - perform css operations on specific browsers Webkit moz

Hacking is to write different CSS styles for different browsers, so that each browser can achieve consistent rendering effects. The process of writing different CSS CODE for different browsers is called CSS HACK, and it is also called writing CSS Hack. Then put the Hack in the specific CSS file of the browser, and let the browsers that meet the conditions parse these codes. Just like the conditional style mentioned earlier, we put the CSS Hack code into the conditional style file, and the browsers that meet the conditions will parse it, and the browsers that do not meet the conditions will not parse it, thus achieving the page rendering effect you need. In a wordUsing CSS Hack will make part of your CSS code useless, and then use conditional styles to use its original CSS code to be parsed in some browsers, and the CSS Hack code will replace that part of the original CSS code in browsers that meet the conditions.The most common one is used under IE6. I don’t want to be specific, but I think everyone has encountered it. Let’s take a look at what Hacks all browsers have. In other words, what CSS writing methods can be recognized by various browsers.

The following is what I have collected about how to write Hack under various browsers.

1. Firefox

  @-moz-document url-prefix() { .selector { property: value; } }

The above is a way of writing that is only recognized by the Firefox browser, specifically:

  @-moz-document url-prefix() { .demo { color:lime; } }

There are several other writing methods that support Firefox:

  /* Supports all firefox versions */ #selector[id=selector] { property: value; } or: @-moz-document url-prefix() { .selector { property: value; } } /* Supports all Gecko-based browsers (including Firefox) */ *>.selector { property: value; }

2. Webkit core browser (chrome and safari)

  @media screen and (-webkit-min-device-pixel-ratio:0) { Selector { property: value; } }

The above writing method is mainly for browsers with Webkit core, such as Google Chrome and Safari browsers:

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

3. Opera browser

  html:first-child>b\ody 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 writing method of Opera browser:

  @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: value;}

The above is how IE9 is written. The specific application is as follows:

  :root .demo {color: #ff0;}

5. IE9 and versions below IE9

  Selector {property:value;}

This writing method can only be recognized by IE9 and versions below IE9. Please note here.Here "" can only be "" and cannot be anything else, such as "", otherwise the effect will be lost.,like:

  .demo {background: lime;}

6. IE8 browser

  Selector {property: value/;} or: @media Selector {property: value/;} 或者： @media \0screen{ Selector {property: value;} }screen{ Selector {property: value;} }

The above writing method can only be recognized by IE, such as:

  .color {color: #fff/;} or: @media .color {color: #fff/;} 或者： @media \0screen{ .color {color: #fff;} }screen{ .color {color: #fff;} }

7. IE8 and above versions

  Selector {property: valueSelector {property: value\0;};}

This writing method is only supported by IE8 and above, such as

  .demo {color: #ff0.demo {color: #ff0\0;};}

8. IE7 browser

  *+html Selector{property:value;} or *:first-child+html Selector {property:value;}

The above two types can only be recognized by IE7 browser, such as:

  *+html .demo {background: green;} or: *:first-child+html .demo {background: green;}

9. IE7 and below version browsers

  Selector {*property: value;}

The above writing method can be recognized in IE7 and its following versions, such as:

  .demo {*background: red;}

10. IE6 browser

  Selector {_property/**/:/**/value;} or: Selector {_property: value;} or: *html Selector {property: value;}

Specific applications are as follows:

  .demo {_width/**/:/**/100px;} or: .demo {_width: 100px;} or: *html .demo {width: 100px;}

The above specifically introduces how to identify various Hack writing methods in various versions of browsers, including IE6-9 and modern versions of browser writing methods. Based on the above, our Hack writing methods for different browsers are mainly divided into two types:Distinguish different Hack writing methods from CSS selectors and CSS properties. Let’s look at these two different ways of writing:

Hack way to write CSS selector

Below we mainly look at the support of CSS selectors and CSS attribute selectors in different browsers. Let’s first look at CSS selector support.

Hack way to write CSS selector

1. IE6 and browsers below IE6

  * html .demo {color: green;}

2. Only IE7 browser

  *:first-child+html .demo {color: green;}

3. All browsers except IE6 (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 browser

  @-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 property hack writing method

1. IE6 browser

  .demo {_color: red;}

2. IE6-7 browser identification

  .demo {*color: red;}

3. All browsers except IE6

  .demo {color/**/:red;}

4. IE6-9 browser

  .demo {color: red;}

5. IE7-8 browser

  .demo {color/*\**/:red;}

Listed above are hacks for writing CSS in various browsers. There are hacks for modern browsers such as Safari, Google Chrome and Firefox. There are also hacks for various browser versions of IE6-9 that our front-end staff hate the most. Moreover, these Hacks are divided into hacks for CSS selectors and hacks for CSS attributes. However, you can decide the specific application according to your own needs. Here are my two personal writing methods:

1. Economical and affordable law:

This writing method focuses on the Hack writing method of separate CSS. Different browsers use different Hack writing methods. In fact, IE's Hack writing method is more common (because we write Hack mainly for IE browsers), especially browsers under IE6. The advantages of writing Hacks separately for various browsers are:Hack writing methods for various browsing methods are effortless and easy to remember.Because other browsers are mainly aimed at modern browsers, there are relatively few. For the use of this Hack, I recommend the following method:

  .demo { color: red;/*All modern browsers*/ color: green;/*All IE browsers*/ color: lime.demo { color: red;/*所有现代浏览器*/ color: green\9;/*所有IE浏览器*/ color: lime\0;/*IE8-9浏览器*/ *color: red;/*IE6-7浏览器*/ +color: blue;/*IE7浏览器*/ _color: orange;/*IE6浏览器*/ } @media all and (min-width:0px){ color: #000;/*Webkit和Opera浏览器*/ } @media screen and (-webkit-min-device-pixel-ratio:0) { color: #f36;/*Webkit内核浏览器*/ } @media all and (-wekit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) { head~body .demo {color: #369;} /*Opera*/ } @-moz-document url-prefix(){ .demo{color:#ccc;}/* all firefox */ };/*IE8-9 browsers*/ *color: red;/*IE6-7 browsers*/ +color: blue;/*IE7 browsers*/ _color: orange;/*IE6 browsers*/ } @media all and (min-width:0px){ color: #000;/*Webkit and Opera browsers*/ } @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-pixel-ratio:0) { head~body .demo {color: #369;} /*Opera*/ } @-moz-document url-prefix(){ .demo{color:#ccc;}/* all firefox */ }

2. Perfectionism writing method

This method is a writing method that pursues perfectionism. It mainly cooperates with the IE conditional comments we mentioned in the previous section, and all uses the selector Hack method. This writing method is divided into two steps:

1. Create a conditional style sheet and add the corresponding class name to the body in HTML:

 <    

2. Then create the corresponding style

  .demo {color: blue;}/*Modern browsers*/ .non-ie .demo {color: red;}/*Browsers except IE*/ .ie9 .demo {color: yellow;}/*IE9 browser*/ .ie8 .demo{color: green;}/*IE8 browser*/ .ie7 .demo {color: orange;}/*IE7 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 (-webkit-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 * / }