List of the most comprehensive CSS hack methods in history

Although hack is not often required for front-end applications for many years, we often encounter inconsistencies in browser performance. Based on this, we are reluctant to use this unfriendly method in some situations to achieve the page performance that everyone needs. I personally do not recommend using hack. If you want to know a good front-end, try not to use hack to meet your requirements and achieve a better user experience. However, the reality is too cruel. The legacy problems of browser vendors make it difficult for us to compromise with hack when needed, although this is only a few cases. Today, based on my own experience and understanding, I have made several demos to put IE6 ~ IE10 makes a summary with CSS hack from other standard browsers. Maybe this article is the most comprehensive summary.

What is CSS hack?

Because different vendors or different versions of a browser (such as IE6-IE11, Firefox/Safari/Opera/Chrome, etc.), the CSS support, parsing is not the same, this results in inconsistent page display effects in different browser environments. In this case, we need to write specific CSS styles for different browsers or versions to achieve a unified page effect, the process of writing the corresponding CSS code for different browsers/versions is called CSS hack!

CSS hack Principle

Because different browsers and different versions have different CSS support and resolution results, and the effect of CSS priority on Browser display results, we can apply different CSS based on different browser scenarios.

CSS hack Classification

CSS Hack has three forms: CSS attribute prefixes, selector prefixes, and IE condition comments (if IE is referenced in the HTML header) Hack, in actual projects, most CSS Hack is introduced for the performance differences between different versions of IE browsers.

• Attribute prefixes (that is, internal Hack): for example, IE6 can recognize underscores (_) and star numbers (*). IE7 can recognize asterisks (*) but cannot recognize underscores "_", IE6 ~ IE10 knows "\ 9", but none of firefox's three mentioned above.
• Selector prefix method (I .e. selector Hack): for example, IE6 can recognize * html. class {}, IE7 can recognize * + html. class {} Or *: first-child + html. class {}.
• IE condition annotation method (HTML condition annotation Hack): For all IE (Note: IE10 + no longer supports condition annotation): <! -- [If IE]> content displayed in IE <! [Endif] --> for IE6 and earlier versions: <! -- [If lt IE 6]> only content displayed in IE6 <! [Endif] -->. This type of Hack not only takes effect for CSS, but also for all code written in the judgment statement.

　　

The CSS hack writing sequence is generally defined in front of CSS with a wide range of applicability and strong recognition capabilities.

CSS hack Method 1: Conditional Annotation

This is the proprietary Hack method of IE browser, which is officially recommended by Microsoft. Example:

Effective only under IE <! -- [If IE]> This text is only displayed in IE browser <! [Endif] --> only effective under IE6 <! -- [If IE 6]> This text is only displayed in IE 6 browser <! [Endif] --> only available in IE6 or later versions <! -- [If gte IE 6]> This text is only displayed in IE 6 or later versions <! [Endif] --> it only takes effect on IE8 <! -- [If! IE 8]> This text is displayed in a non-IE8 browser <! [Endif] --> valid for non-ie browsers <! -- [If! IE]> This text is only displayed in a non-IE browser <! [Endif] -->

CSS hack Method 2: Class Attribute prefix

Attribute prefixes are prefixed with hack that can only be recognized by a specific browser before the CSS style attribute names to achieve the expected page display effect.

CSS hack table of each version of IE browser

Hack

Writing Method

Instance

IE6 (S)

IE6 (Q)

IE7 (S)

IE7 (Q)

IE8 (S)

IE8 (Q)

IE9 (S)

IE9 (Q)

IE10 (S)

IE10 (Q)

*

* Color

Y

Y

Y

Y

N

Y

N

Y

N

Y

+

+ Color

Y

Y

Y

Y

N

Y

N

Y

N

Y

-

-Color

Y

Y

N

N

N

N

N

N

N

N

_

_ Color

Y

Y

N

Y

N

Y

N

Y

N

N

#

# Color

Y

Y

Y

Y

N

Y

N

Y

N

Y

\ 0

Color: red \ 0

N

N

N

N

Y

N

Y

N

Y

N

\ 9 \ 0

Color: red \ 9 \ 0

N

N

N

N

N

N

Y

N

Y

N

! Important

Color: blue! Important; color: green;

N

N

Y

N

Y

N

Y

N

Y

Y

Note: In standard mode

• "-" Minus signs are IE6 proprietary hack
• "\ 9" IE6/IE7/IE8/IE9/IE10 all take effect
• "\ 0" IE8/IE9/IE10 all take effect, which is the hack of IE8/9/10
• "\ 9 \ 0" only applies to IE9/IE10, which is the hack of IE9/10.

The demo is as follows:

<Script type = "text/javascript"> // alert (document. compatMode); </script> <style type = "text/css"> body: nth-of-type (1 ). iehack {color: # F00;/* CSS hack for Windows IE9/Firefox 7 +/Opera 10 +/all Chrome/Safari, the selector also applies to almost all Mobile/Linux/Mac browser */}. demo1 ,. demo2 ,. demo3 ,. demo4 {width: 100px; height: 100px ;}. hack {/* demo1 * // * demo1 pay attention to the sequence. Otherwise, IE6/7 may not be correctly displayed, resulting in a white background */background-color: red; /* All browsers */background-color: Blue! Important;/* All browsers but IE6 */* background-color: black;/* IE6, IE7 */+ background-color: yellow;/* IE6, IE7 */background-color: gray \ 9;/* IE6, IE7, IE8, IE9, IE10 */background-color: purple \ 0;/* IE8, IE9, IE10 */background-color: orange \ 9 \ 0;/* IE9, IE10 */_ background-color: green; /* Only works in IE6 */* + background-color: pink;/* WARNING: Only works in IE7? Is it right? * //}/* You can use javascript to detect IE10 and add class = "IE10" to the 





Demo1 is used to test the hack Display Effect in different ie browsers.
IE6: pink,
IE7: pink,
IE8 is displayed in blue,
IE9 is displayed in blue,
Firefox/Chrome/Opera: blue,
If you remove! If the important attribute is defined, IE6/7 is still pink, IE8 is purple, IE9/10 is orange, Firefox/Chrome is red, and Opera is purple. Isn't it strange: Except IE6, all other performances meet our expectations. Why is the color displayed in IE6 not _ background-color: green; but * + background-color: pink? Is it the last such thing as IE7 private hack? Isn't it that * + is the private hack of IE7 ??? Wrong. You may be too careless! We often say that the * + html selector format for IE7 exclusive * + hack is * + html selector, rather than adding the * + prefix to the attribute directly. If you want to customize a special style for IE7, use the following method:
*+html #ie7test { /* IE7 only*/color:green;}
After testing, I found that the attribute prefix * + background-color: pink; only known as IE6 and IE7. * + Html selector is only known to IE7. Therefore, we must pay special attention when using it.
Demo2 instances are used to differentiate ie6 ~ in standard mode ~ Hack of ie9 and Firefox/Chrome. Pay attention to the sequence.
IE6 is displayed in green,
IE7: black,
IE8 is displayed in red,
IE9 is displayed in blue,
Firefox/Chrome: orange,
(In this example, IE10 works the same as IE9, and the latest Opera version works the same as IE8)
Demo3 instances are also used to differentiate ie6 ~ in standard mode ~ Hack of ie9 and Firefox/Chrome. Pay attention to the sequence.
IE6 is displayed in red,
IE7 is displayed in blue,
IE8 is displayed in green,
IE9: pink,
Firefox/Chrome: orange,
(In this example, IE10 works the same as IE9, and the latest Opera version works the same as IE9 in pink)
Demo4 instances are used to differentiate ie6 ~ in standard mode ~ Ie10 and Opera/Firefox/Chrome hack. In this example, pay special attention to the sequence.
IE6: orange,
IE7: pink,
IE8: Yellow,
IE9 is displayed in purple,
IE10: Green,
Firefox: blue,
Opera: black,
Safari/Chrome: Gray,

CSS hack method 3: Selector prefix Method
The selector prefix method is used for browsers with inconsistent page performance or special treatment. Before the CSS selector, add some prefixes that can only be recognized by certain browsers for hack.
Currently, the most common is
* Html * prefix only takes effect for IE6 * + html * + prefix only takes effect for IE7 @ media screen \ 9 {...} valid only for IE6/7 @ media \ 0 screen {body {background: red;} Only for IE8 @ media \ 0screen \, screen \ 9 {body {background: blue ;}} only valid for IE6/7/8 @ media screen \ 0 {body {background: green;} only valid for IE8/9/10 @ media screen and (min-width: 0 \ 0) {body {background: gray;} is valid only for IE9/10 @ media screen and (-ms-high-contrast: active ), (-ms-high-contrast: none) {body {background: orange ;}} is only valid for IE10, etc.

CSS3 selector combined with JavaScript 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 ), therefore, we can use javascript to add this attribute to the document tag, and then use the CSS3 basic 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;}
Advantages and disadvantages of CSS hack
In general, we try to avoid using CSS hack, but in some cases, we have to use hack to ensure downward compatibility with user experience. For example, because IE8 and earlier versions do not support CSS3, our project page uses a large number of new CSS3 attributes for normal rendering under IE9/Firefox/Chrome, in this case, if you do not use methods such as css3pie or htc or conditional comments, you may have to launch ie8-exclusive hack. Although the use of hack is good for page Performance consistency, excessive abuse of hack can cause html document confusion and increase the burden of management and maintenance. I believe that as long as we work together to reduce usage and use hack with caution, browser vendors will surely become more and more unified in the future and smoothly transition to the mainstream era of standard browsers. Abandoning the old IE hack will surely reduce the complexity of our coding and reduce our useless work.
Finally, add a CSS hack table summarized by a foreign Daniel. At this time, a summary table of old knowledge 6 years ago is provided here for reference only when necessary.


Note: This test environment is IE6 ~ IE10, Chrome 29.0.1547.66 m, Firefox 255.0.1, and Opera 12.02. I summarized my work and summarized it for a few days. I will share it with you today. There will inevitably be some leaks in this article. Please let us know if you discover it in time!
Reprinted, please specify the blog column "List of the most comprehensive CSS Hack methods in history" from CSDN freshlover