CSS Hack, csshack

CSS Hack, csshack
Abstract:

When we create a page, CSS hack has different understandings of CSS parsing in different browsers, such as Internet Explorer and Mozilla Firefox, which leads to different page effects, we cannot get the page effect we need. At this time, we need to write different CSS for different browsers so that they can be compatible with different browsers at the same time, so that we can get the desired page effect in different browsers.

CSS Hack has three forms: Attribute-level Hack, selector Hack, and IE condition Hack.

Note: minimize the use of CSS Hack.

 

Principle:

Because different browsers have different support for CSS and parse results, they also have a relationship with the priority of CSS. We can write different CSS for different browsers based on this.

Practical Application: Syntax:

Selector{<Hack> property: value;} orSelector{Property: value Valid value:

_: Select IE6 and below. A hyphen (-) can also be used. To avoid confusion with certain properties of a hyphen, it is more appropriate to use an underscore.

*: Select IE7 or lower. Such as: (+) and (#) can be used, but the industry has a higher awareness (*).

\ 9: Select IE6 + to distinguish IE from FireFox.

\ 0: Select IE8 + and Opera

[; Property: value;];: select the webkit core browser (Chrome, Safari ). IE7 and below can also be identified. The three semicolons inside and outside the brackets must be retained. The first semicolon can be any rule or any number of rules.

[; Color: # f00;]; and [color: # f00; color: # f00;]; and [margin: 0; padding: 0; color: # f00;]; is equivalent. The last rule in brackets always takes effect, so the first method is usually the most concise.

Note :! Important is not a hack method. It is used to change the css priority, because ie6 is not recognized! Important, so it is used as a css hack. This is wrong.

Note: Select different browsers and versions

• • Browser priority: FF <IE9 <IE8 <IE7 <IE6, CSS hack write order is generally FF IE9 IE8 IE7 IE6
  • Some CSS Hack browsers have cross-recognition, so it is necessary to implement Hack for different browsers through layer-by-layer coverage. For example:
  • If you want to display the same text in IE6, 7, or 8 in different colors, you can write it as follows:

    • .test{color:#090\9; /* For IE8+ */*color:#f00;  /* For IE7 and earlier */_color:#ff0;  /* For IE6 and earlier */}

      * The preceding Hack must run in standard mode. If it is run in weird mode, these Hack will be recognized by different versions of IE, resulting in failure.

HACK Demo:

　　

1. demo {color: # f1ee18;/* all recognition */background-color: # 00deff \ 9;/* IE6, 7, 8 recognition */+ background-color: # a200ff; /* IE6, 7 recognition */_ background-color: #1e0bd1/* IE6 recognition */} 2 3 @ media screen and (-webkit-min-device-pixel-ratio: 0 ){. demo {background-color: # f1ee18 }{}/* Safari (Chrome) Valid */4 @ media all and (min-width: 0px ){. demo {background-color: # f1ee18;/* opera and Safari (Chrome) and firefox */background-color: #4cac70 \ 0 ;}/* Only valid for Opera */} {} 5 6. demo, x:-moz-any-link, x: default {background-color: #4eff00; /* IE7, Firefox3.5, and the following identification */} 7 @-moz-document url-prefix (){. demo {background-color: #4eff00;/* only recognizes Firefox */} 8 * + html. demo {background-color: # a200ff ;} /* Only IE7 recognition */9 10/* in general, we distinguish IE7 only use + background-color with _ background-color. code such as demo, x:-moz-any-link, and x: default distinguishes Firefox3.5 from the following. Remember that this method is also effective for IE7, so you have to rewrite it again. + The background-color or * + html. demo {background-color: blue;} method is only valid for IE7. You can use the @-moz-document url-prefix () {} method to differentiate all firefox */11 12. demo, x:-moz-any-link, x: default {display: block;/* IE7 firefox3.5 and the following identification */+ display: none/* further differentiate IE7 */} 13 @-moz-document url-prefix (){. demo {display: block;/* only recognizes firefox */} 14 @ media screen and (-webkit-min-device-pixel-ratio: 0 ){. demo {display: block ;}{}/* safari (Chrome) Valid */15 @ media all and (min-width: 0px ){. demo {display: none \ 0;}/* only valid for Opera */}{}

 

Summary:

Css hack is not a standard css, so try to use it as little as possible.

 
Css hack

CSS hack is a cheating method in CSS, because currently all browsers do not have uniform support for CSS, for example, it is also a margin: 1px, the effect may be 1px in different browsers.

In this case, we can only use CSS hack to temporarily transition to this stage. CSS hack is like a CSS Statement recognized by IE, but FF cannot recognize it, in this way, we can achieve our goal. css hack appears in many advanced skills, but it is not very recommended. After all, the css trend in the future is not very clear. Try to avoid it.

Many css misplacement problems are not browser errors, but errors in our editing.

For more details about css hack, refer to the CSS blackboard report for more details.

Baidu: CSS blackboard Report, the first one. Come on!

Css hack

CSS hack is a cheating method in CSS, because currently all browsers do not have uniform support for CSS, for example, it is also a margin: 1px, the effect may be 1px in different browsers.

In this case, we can only use CSS hack to temporarily transition to this stage. CSS hack is like a CSS Statement recognized by IE, but FF cannot recognize it, in this way, we can achieve our goal. css hack appears in many advanced skills, but it is not very recommended. After all, the css trend in the future is not very clear. Try to avoid it.

Many css misplacement problems are not browser errors, but errors in our editing.

For more details about css hack, refer to the CSS blackboard report for more details.

Baidu: CSS blackboard Report, the first one. Come on!