CSS hack skills

CSS hack tips: the most comprehensive CSS Hack method in history, which is originally published by CSDN freshlover.

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

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

\ 0

Color: red \ 0

Red

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:

{:;}{:;:;}{:; :;:; :;:; :; :;:; :; }{:; }{:;  :;  :;  :;  :;  }{:;    }{:;    }{:;     }{:; }{:; }  {:;      :;      :;    :;        :;       }{:;}  {:; }{:; } {:;}

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 and so on. It is combined with some selectors of CSS3, such as html: first-child, body: nth-of-type (1), more hack methods are derived. For details, refer to the following table:

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 you work hard, use less, and use hack with caution, the 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!