CSS Hack Way

Do the front-end for many years, although not often need hack, but we often encounter each browser performance inconsistencies. Based on this, in some cases we would be extremely reluctant to use this unfriendly way to achieve the desired page performance. I personally do not recommend the use of hack, to know a good front end, to the extent possible without the use of hack to achieve the needs of a better user experience. But Ah, the reality is too cruel, the history of the browser vendors between the problems left us to the target needs to hack compromise, although this is only a few cases. Today, combined with their own experience and understanding, do a few demo to Ie6~ie10 and other standard browser CSS hack do a summary, perhaps this article should be the most comprehensive hack summary of it now.

What is CSS hack

Because of the different vendors ' browsers or different versions of a browser (such as ie6-ie11,firefox/safari/opera/chrome, etc.), the support and parsing of CSS is different, which results in inconsistent page presentation in various browser environments. At this point, in order to achieve a unified page effect, we need to write a specific CSS style for different browsers or different versions, we will write the corresponding CSS code for different browsers/different versions of the process, called CSS hack!

The principle of CSS hack

Due to different browser and browser versions of CSS support and parsing results are not the same, and CSS priority on the effect of the browser display, we can apply different CSS for different browser scenarios.

CSS Hack Categories

CSS Hack There are roughly 3 kinds of representations, CSS attribute prefix method, selector prefix method and IE conditional annotation method (that is, HTML header reference if IE) Hack, the actual project CSS Hack is mostly for different versions of IE browser performance differences introduced.

• Attribute prefix method (that is, the class internal hack): For example, IE6 can recognize the underscore "_" and the asterisk "*", IE7 can recognize the asterisk "*", but do not recognize the underscore "_", Ie6~ie10 Know "\9", but the previous three of Firefox are not recognized.
• Selector prefix method (i.e. selector hack): For example IE6 can identify *html. CLASS{},IE7 can identify *+html. class{} or *:first-child+html. class{}.
• IE conditional annotation method (i.e. HTML conditional comment hack): For all IE (note: ie10+ no longer supports conditional comments): <!--[if Ie]>ie browser displays content <! [Endif]-->, for IE6 and the following versions: <!--[if Lt IE 6]> only the content displayed in ie6-<! [endif]-->. This type of hack is not only valid for CSS, but all code written in the judgment statement will take effect.

　　

CSS hack writing order, is generally applicable to a wide range of highly recognized CSS defined in front.

CSS hack method One: Conditional annotation method

　

This way is the exclusive hack method of IE browser, Microsoft Official recommended the use of hack way. Examples are as follows

Effective only under IE <!--[if ie]> this text is only displayed in IE browser <! [endif]--> only takes effect under IE6 <!--[if IE 6]> this text is displayed only in IE6 browser <! [endif]--> only valid at IE6 or above <!--[if GTE ie 6]> this text only appears in IE6 above (including) version of IE browser <! [endif]--> is not effective on IE8 <!--[if! IE 8]> This text in non-IE8 browser display <! [endif]--> non-IE browser effective <!--[if! Ie]> This text is only displayed in non-IE browser <! [endif]-->

CSS hack mode Two: attribute prefix method in class

The attribute prefix method is preceded by the CSS style property name with some hack prefixes that only a specific browser can recognize to achieve the desired page presentation effect.

IE browser versions CSS hack table

Hack

Writing

Instance

IE6 (S)

IE6 (Q)

IE7 (S)

IE7 (Q)

IE8 (S)

IE8 (Q)

IE9 (S)

IE9 (Q)

IE10 (S)

IE10 (Q)

*

*color

Cyan

Y

Y

Y

Y

N

Y

N

Y

N

Y

+

+color

Green

Y

Y

Y

Y

N

Y

N

Y

N

Y

-

-color

Yellow

Y

Y

N

N

N

N

N

N

N

N

_

_color

Blue

Y

Y

N

Y

N

Y

N

Y

N

N

#

#color

Purple

Y

Y

Y

Y

N

Y

N

Y

N

Y

/

Color:red\0

Red

N

N

N

N

Y

N

Y

N

Y

N

\9\0

Color:red\9\0

Pink

N

N

N

N

N

N

Y

N

Y

N

!important

Color:blue!important;color:green;

Brown

N

N

Y

N

Y

N

Y

N

Y

Y

Description: In standard mode

• "The-″ minus is IE6 proprietary hack
• "The \9″ie6/ie7/ie8/ie9/ie10 are in effect.
• "The \0″ie8/ie9/ie10 are in force and are IE8/9/10 hack
• "\9\0″ only for Ie9/ie10, is IE9/10 's hack

Demo is as follows

2. <script type="Text/javascript" >
4. alert (Document.compatmode);
6. </script>
8. <style type="Text/css" >
10. Body:nth-of-type (1). iehack{
12. color: #F00; /* For Windows Ie9/firefox 7+/opera 10+/all Chrome/safari css hack, selectors also apply almost all Mobile/linux/mac browser*/
14. }
16. . demo1,.demo2,.demo3,.demo4{
18. width:100px;
20. height:100px;
22. }
24. . hack{
26. /*DEMO1 * *
28. /*demo1 Note the order, otherwise the IE6/7 may not display correctly, causing the result to appear as a white background */
30. Background-color:red; / * All browsers * /
32. background-color:blue !important; /* All browsers but IE6 * /
34. *Background-color:black; / * IE6, IE7 * /
36. +Background-color:yellow; / * IE6, ie7*/
38. background-color:gray\9; / * IE6, IE7, IE8, IE9, IE10 * *
40. background-color:purple\0; / * IE8, IE9, IE10 * /
42. background-color:orange\9\0; /*IE9, ie10*/
44. _background-color:Green; / * only works in IE6 * /
46. *+Background-color:pink; / * warning:only works in IE7? Is it right? */  
48. }
52. /* IE10 can be detected by JavaScript and then added to IE10 's
53. . ieTen #hack {
55. color:red; / * only works in IE10 * /
57. }
61. /*demo2*/
63. . iehack{
65. /* The demo instance is used to differentiate the hack of IE6~IE9 and firefox/chrome in standard mode, note the order
67. IE6 shown as: Green,
69. IE7 Display as: Black,
71. IE8 shown as: Red,
73. IE9 shown as: Blue,
75. Firefox/chrome shown as: orange,
77. (This example IE10 effect with Ie9,opera the latest version of the effect with IE8)
79. */
81. Background-color:orange; / * all-for firefox/chrome * /
83. background-color:red\0; / * IE 8/9/10/opera-for ie8/ie10/opera * /
85. background-color:blue\9\0; / * IE 9/10-for IE9/10 * /
87. *Background-color:black; /* IE 6/7-for IE7 */
89. _background-color:Green; / * IE 6-for IE6 * /
91. }
95. /*demo3
97. Instances are used to differentiate the hack of IE6~IE9 and firefox/chrome in standard mode, and note the order
99. IE6 shown as: Red,
101. IE7 shown as: Blue,
103. IE8 shown as: Green,
105. IE9 Display as: Pink,
107. Firefox/chrome shown as: orange,
109. (This example IE10 effect with Ie9,opera the latest version of the effect is also the same as IE9 Pink)
113. */
115. . element {
117. Background-color:orange; / * All ie/ff/ch/op*/
119. }
121. . element {
123. *Background-color: Blue; / * ie6+7, doesn ' t work in IE8/9 as IE7 * /
125. }
127. . element {
129. _background-color: red; / * IE6 * /
131. }
133. . element {
135. background-color: green\0; / * ie8+9+10 * /
137. }
139. : root. element { background-color:pink\0;} / * ie9+10 * /
143. /*demo4*/
145. /*
149. This example is used to differentiate the hack of ie6~ie10 and opera/firefox/chrome in standard mode, especially in order
151. IE6 shown as: orange,
153. IE7 Display as: Pink,
155. IE8 shown as: yellow,
157. IE9 shown as: Purple,
159. IE10 shown as: Green,
161. Firefox is displayed as: Blue,
163. Opera is displayed as: black,
165. Safari/chrome shown as: Gray,
169. */
171. . hacktest{
173. Background-color:Blue; / * All identified, here for Firefox * /
175. background-color:red\9; /*all ie*/
177. background-color:yellow\0; /*for IE8/IE9/10 The latest version of opera also know * *
179. +Background-color:pink; /*for ie6/7*/
181. _background-color:orange; /*for ie6*/
183. }
187. @media screen and (min-width:0) {
189. . hacktest {background-color:black\0;} /*opera*/
191. }
193. @media screen and (min-width:0) {
195. . hacktest { background-color:purple\9;} /* For Ie9/ie10 PS: Some foreign habits often write, not even consider opera also know the actual * *
197. }
199. @media screen and (-ms-high-contrast:active), (-ms-high-contrast: none) {
201. . hacktest { background-color:Green;} /* For ie10+ This notation can be adapted to high contrast and default mode, thus covering all ie10 modes */
203. }
205. @media screen and (-webkit-min-device-pixel-ratio:0) {. hacktest {background-color:Gray;}} /*for chrome/safari*/
209. /* #963棕色: Root is for IE9/IE10, priority is higher than @media, use with caution! If they are combined, add!important in the @media style if necessary to differentiate between IE9 and IE10 */
211. /*
213. : Root. hacktest {background-color: #963 \9;}
215. */
217. </style>

Demo1 is to test the display effect of hack under different IE browsers
IE6 Display as: Pink,
IE7 Display as: Pink,
IE8 shown as: Blue,
IE9 shown as: Blue,
Firefox/chrome/opera shown as: Blue,
If the!important attribute definition is removed, the IE6/7 is still pink, IE8 is purple, IE9/10 is orange, firefox/chrome turns red, and opera is purple. It's strange that all the other performances are in line with our expectations, except IE6. Then why IE6 performance of the color is not _ green but *+ padding:0px; White-space:pre-wrap; Word-wrap:break-word; " >*+html #ie7test {/* IE7 only*/color:green;}

After testing, I found that the attribute prefix *+ only IE6 and IE7 know. and *+html selector only IE7 know. So we must pay special attention when we use it.

Demo2 instances are hack used to differentiate between IE6~IE9 and firefox/chrome in standard mode, and note the order
IE6 shown as: Green,
IE7 Display as: Black,
IE8 shown as: Red,
IE9 shown as: Blue,
Firefox/chrome shown as: orange,
(This example IE10 effect with Ie9,opera the latest version of the effect with IE8)

Demo3 instances are also used to differentiate hack of IE6~IE9 and firefox/chrome in standard mode, and note the order
IE6 shown as: Red,
IE7 shown as: Blue,
IE8 shown as: Green,
IE9 Display as: Pink,
Firefox/chrome shown as: orange,
(This example IE10 effect with Ie9,opera the latest version of the effect is also the same as IE9 Pink)

Demo4 instances are hack used to differentiate between Ie6~ie10 and opera/firefox/chrome in the standard mode, especially in order to be aware of this example
IE6 shown as: orange,
IE7 Display as: Pink,
IE8 shown as: yellow,
IE9 shown as: Purple,
IE10 shown as: Green,
Firefox is displayed as: Blue,
Opera is displayed as: black,
Safari/chrome shown as: Gray,

CSS hack way Three: selector prefix method

The selector prefix method is for browsers that are inconsistent with some pages or that require special treatment, hack with prefixes that are only recognized by certain browsers before the CSS selector.

At present, the most common is

*html * prefix is only valid for IE6 *+html *+ prefix is only valid for IE7 @media screen\9{...} Valid for IE6/7 only @media \0screen {body {background:red;}} Valid only for IE8 @media \0screen\,screen\9{body {background:blue;}}  Only valid for Ie6/7/8 @media screen\0 {body {background:green;}} is valid for IE8/9/10 only @media screen and (min-width:0\0) {body {background: Gray }} only valid for IE9/10 @media screen and (-ms-high-contrast:active), (-ms-high-contrast:none) {body {background:orange;}} only for IE1 0 effective, etc.

Some selectors, such as Html:first-child,body:nth-of-type (1), which are combined with CSS3, derive more hack ways, which can be referenced in the following table:

CSS3 selector combined with JavaScript's hack

We use IE10 for example:

Because the IE10 user agent 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 property to the document label, and then use the CSS3 base selector to match.

JavaScript code:

var htmlobj = Document.documentelement;htmlobj.setattribute (' data-useragent ', navigator.useragent); Htmlobj.setattribute (' Data-platform ', navigator.platform);

CSS3 Matching Code:

html[data-useragent*= ' MSIE 10.0 '] #id {color: #F00;}

CSS Hack pros and cons

In general, we try to avoid the use of CSS hack, but in some cases in order to take into account the user experience to achieve backward compatibility, the last resort to use hack. For example, because IE8 and the following versions do not support CSS3, and our project page uses a large number of CSS3 new properties to render normally under Ie9/firefox/chrome, in which case the Css3pie or HTC or conditional comment methods are not used. You might have to let ie8-'s exclusive hack. While using hack is good for consistency in page performance, excessive abuse can cause HTML documents to become cluttered, adding to the burden of management and maintenance. I believe that as long as we work together, less use, cautious use of hack, the future will certainly promote the standards of browser manufacturers increasingly unified, smooth transition to the mainstream of standard browser era. Discard those old IE hack, will reduce our coding complexity, less do not work hard.

Finally make up a quote from a foreign Daniel summary of the CSS hack table, then a 6 years ago, the old Knowledge summary table, put here only for the time needed for convenient reference.

Description: This test environment is Ie6~ie10,chrome 29.0.1547.66 m,firefox 20.0.1, Opera 12.02 and so on. Side work, while summing up, summed up a few days to write down, today to share it out, the text inevitably has flaws, such as the hero found please timely inform!

Reprinted from Csdn Freshlover's blog column, "the most comprehensive CSS hack way at a glance"

CSS Hack Way