Some Opinions on CSS hack

on that day, guago gave a question, talked about some of CSS hack's views, and talked about his own ideas.

Due to the differences in the resolution of CSS in various browsers, the performance of the same page varies with different browsers. CSS hack technology was developed to solve this compatibility problem.
I personally think that CSS hack is actually a method to cheat browsers. Some browsers cannot parse the selector or attribute by adding some special symbols in the selector and attribute, to distinguish different browsers. In fact, I personally think that CSS hack is insecure and risky. The current browser is updated very quickly and there are several versions, no one can guarantee that the CSS hack set for this browser version is still valid in the next version. For example, before IE7 is released ,! Important has always been used as a CSS hack to distinguish ie from Firefox. However, after IE7 came out, it followed IE7! Important's support makes it impossible to distinguish ie from Firefox! Important is implemented, which may lead to the previous production and use in IE6! Important hack web pages may be different under ie7.
It is not to say that it is opposed to the use of CSS hack technology, but that it should be used as little as possible for a risky technology, so it is not necessary to use it as far as possible. I have seen some friends' CSS beforeCodeThe hack technology is widely used without comments. You can imagine how painful it is to understand the code. With the update of the browser, it is a good thing that CSS hack does not bring us problems. However, once a problem occurs, it requires a certain amount of maintenance cost. If you encounter CSS code as mentioned above, that is really a headache. So when will CSS hack be used? I think when you are sure that the browser's parsing of CSS does not comply with the specifications, or is caused by a browser bug, rather than the performance differences caused by insufficient understanding of CSS or incorrect page structure details, this is the use of CSS hack, rather than immediately using CSS hack once the performance difference is found, the CSS code written in this way often lacks specifications and readability, And the maintenance cost is also high.

This article mainly uses ". ","> "," * ", and" _ "are four special symbols. CSS hack is implemented based on the differences supported by browsers to solve CSS support problems in different browsers, see the following table:

Attribute	IE6	IE7	IE8	Ff2	Ff3	Opera9.5
> Property	Y	Y	Y	N	N	N
. Property	Y	Y	Y	N	N	N
* Property	Y	Y	Y	N	N	N
_ Property	Y	N	N	N	N	N

From the preceding table, we can see that>,., and * are consistent in different browsers, while _ is different in IE6, IE7, and IE8. In addition, IE6 does not support this function! Important, and several other browsers can recognize it.

Let's take a look at the example:

Difference between IE6 and FF: Background: orange; * Background: blue;
Difference between IE6 and IE7: Background: Green! Important; Background: blue;
Difference between IE7 and FF: Background: orange; * Background: green;
Difference FF/IE7/IE6: Background: orange; * Background: Green! Important; * Background: blue;

Note: IE can recognize * standard browsers (such as ff) cannot recognize *
IE6 can recognize *, but cannot recognize it! Important
IE7 can recognize * and can also recognize! Important
FF cannot recognize *, but can recognize it! Important
IE6 supports underlines, while IE7 and Firefox do not.
So you can also distinguish IE6, IE7, Firefox: Background: orange; * Background: green; _ Background: blue;

CSS hack can be used to implement the same style on different browsers, effectively solving the differences between browsers.