The most complete list of CSS hack methods (multi-browser compatible)

In order to achieve a unified page effect, you need to write a specific CSS style for different browsers or different versions, we put this to different browsers/different versions of the corresponding CSS code process, called CSS hack! for many years, although not often need to hack, However, we often encounter inconsistencies in the performance of the browsers. 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 the IE6.
<!--[if IE 6]>
This text is only displayed in IE6 browser
<! [endif]-->

Only valid for versions above IE6
<!--[if GTE IE 6]>
This text is only displayed in IE6 or above (including) version of IE browser
<! [endif]-->

is not effective on IE8.
<!--[if! IE 8]>
This text is displayed in a non-IE8 browser
<! [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

<script type= "Text/javascript" >//alert (Document.compatmode); </script> <style type= "Text/css" > Body:nth-of-type (1). iehack{color: #F00;/* for Windows Ie9/firefox 7 +/opera 10+/all Chrome/safari css hack, selectors also apply almost all Mobile/linux/mac browser*/}. demo1,.demo2,.demo3,.demo4{width:100       px   height:100px; }. hack{/*demo1 *//*demo1 Note the order, otherwise IE6/7 may not display correctly, causing the result to appear as a white background */background-color:red;/* All browsers */Backgrou Nd-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? */}/* Can be detected by JavaScript IE10, and then to IE10 


Copy Code

The code is as follows:


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

CSS3 Matching Code:





Copy Code

The code is as follows:


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!