Css:hack Ways at a glance

This article quoted: http://blog.csdn.net/freshlover/article/details/12132801What 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 annotations):
  <!--[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

1     effective only under IE2<!--[If ie]>3 This text is only displayed in IE browser4<! [endif]-->5     6 only takes effect under the IE6 .7<!--[If IE6]>8 This text is only displayed in IE6 browser9<! [endif]-->Ten      One only valid for versions above IE6 A<!--[if GTE IE6]> - This text is only displayed in IE6 or above (including) version of IE browser -<! [endif]--> the      - is not effective on IE8. -<!--[if! Ie8]> - This text is displayed in a non-IE8 browser +<! [endif]--> -      + non-IE browser effective A<!--[if! Ie]> at 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

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

*the HTML * prefix is only valid for IE6*+html *+ prefix only valid for IE7@media screen\9{...} Only for ie6/.7 Effective @media\0screen {body {background:red;}} Only valid for IE8 @media\0screen\,screen\9{body {background:blue;}} Only for ie6/.7/8 Effective @media screen\0{body {background:green;}} Only for ie8/.9/10 Effective @media screen and(Min-width:0\0{body {background:gray;}} only for ie9/10 Effective @media screen and(-ms-high-contrast:active), (-ms-high-Contrast:none) {body {background:orange;}} Only valid for IE10, etc.

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.

Css:hack Ways at a glance