About CSS Hack

Because of different vendors ' browsers, such as Internet Explorer,safari,mozilla firefox,chrome, or different versions of the same vendor's browser, such as IE6 and IE7, the parsing of the CSS is not completely understood, resulting in a page effect that is not what we need. At this point we need to write different CSS for different browsers, so that it can be compatible with different browsers at the same time, in different browsers can also get the desired page effect.

Simply put, the purpose of CSS hack is to make your CSS code compatible with different browsers. Of course, we can, in turn, use CSS hack to customize different CSS effects for different versions of browsers.

What? Still wood, you know? That means the same effect you have to write different CSS code according to different browsers! Now the main focus is on IE browser.

principle : CSS Hack are implemented using the precedence of CSS properties.

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

How to implement CSS hack:

1, CSS class internal hack

The browser version is recognized by the prefix or suffix of the attribute and value.

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 Firefox mentioned three are not recognized.

2. Selector hack

Prefix the browser to achieve different browser version recognition.

*: Identify IE6

*+ prefix: Identify IE7

Ex

*div{

}

3. HTML header reference hack (master)

Principle: Use IE's conditional comment to complete the browser version judgment (Note: ie10+ no longer supports conditional annotations).

Grammar:

<!--[if condition IE version]>

What to do when the browser version is satisfied

<! [endif]-->

Version: 6-10, if the version number is omitted, then determine whether it is IE

<!--[if IE 6]>

Actions to be performed only in IE6

<! [endif]-->

Conditions:

1. GT

Determines whether the current browser version is larger than the specified version

2, GTE

Determines whether the current browser version is greater than or equal to the specified version

3, LT

Determines whether the current browser version is less than the specified version

4. LTE

Determines whether the current browser version is less than or equal to the specified version

5,!

No, take the reverse, not

Determines whether the current browser version is not equal to the specified version

6, do not write

Determine if the browser is a specified version of IE or IE

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 lot of CSS3 new properties to render normally under Ie9/firefox/chrome, you may 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.

About CSS Hack