CSS Hack Technology Usage Summary

what is CSS hack?

In the web development, we often encounter different browser performance inconsistencies, due to different manufacturers of browsers or a different version of a browser, CSS support, parsing is not the same, resulting in different browser environment rendered inconsistent page display effect. 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!

Let's talk about the use of CSS hack technology:

CSS Hack Technology

1. Detailed CSS hack classification and CSS hack three ways

CSS hack categories
There are three forms of representation, CSS attribute prefix method, selector prefix method, and IE conditional annotation method.

Attribute prefix method (i.e., intra-class hack)

Selector Prefix method

IE Conditional annotation method
CSS hack is generally a wide range of applications, the ability to identify a strong CSS defined in front.

2. Using CSS hack technology to solve browser compatibility issues

There are roughly 3 forms of CSS hack: css attribute hack, css selector hack, and IE conditional comment hack, hack mainly for IE browser.

A, attribute-level hack: For example, IE6 can recognize the underscore "_" and the asterisk "*", IE7 can recognize the asterisk "*", but do not recognize the underscore "_", and Firefox two are not recognized. Wait a minute

B, selector level hack: such as IE6 can identify *html. CLASS{},IE7 can identify *+html. class{} or *:first-child+html. class{}. Wait a minute

C, IE conditional comment hack: For example, for all ie:<!--[if ie]><!--your code--><! [Endif]-->, for IE6 and the following versions:<!--[if LT IE 7]><!--Your code--><! [Endif]--> This type of hack takes effect not only on CSS, but on all code written in the judgment statement.

3. Introduction to CSS hack in different browsers

Difference between IE6 and FF:
Backgroundrange;*blue; </span>
Difference between IE6 and IE7:
Background:green!important;blue; </span>
Difference between IE7 and FF:
Backgroundrange; *background:green;
Difference ff,ie7,ie6:
Backgroundrange;*background:green!important;*blue; </span>

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

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.

5. CSS hack

Due to different browsers, and even different versions of the same browser, the parsing of CSS is not the same, resulting in inconsistent page results, written for different browsers CSS code is called CSS hack.

Commonly used CSS hack there are three ways, CSS internal hack, selector hack, HTML header reference, the first of the most commonly used.

6. CSS Hack Collection Summary

Block IE browser (ie not shown)
*:lang (ZH) select {font:12px!important;} Special for/*FF */
select:empty {font:12px!important;}/*safari Visible */
Here select is the selector and is replaced as appropriate. The second sentence is unique to the Safari browser on your Mac.
IE7 Identification only

Related questions

1. Problems with CSS hack

2. A question about the IE version hack

3. Input text Check to change the default color, Safari does not support, what other hack scheme?

"Recommended"

1. PHP Chinese Web free video tutorial: "Php.cn lonely Nine Cheap (2)-css video Tutorial"