Hack technical summary

1.1 Overview
        Due to the different support of web standards by major browsers, especially IE browsers, the performance of standard web pages in various browsers is different. Therefore, solving the compatibility problems of various browsers has become the most important work of front-end engineers. One, and the so-called hack technology is necessary in front-end development.
1.2 Common forms
        of hack There are three common forms of CSS Hack: CSS property Hack, CSS selector Hack, and IE conditional comment Hack. Hack is mainly aimed at IE browsers.
        1. Property-level Hack: Add some special characters before CSS properties, and different browsers recognize different characters to achieve compatible effects.
        2. Selector-level Hack: Add some selectors that only specific browsers can recognize before CSS selectors to achieve compatible effects.
        3. IE Conditional Comment Hack: IE Conditional Comment is a non-standard logic statement provided by Microsoft since IE5. This type of hack is not only effective for CSS, but also for all the code written in the judgment statement.
        Note: Conditional comments can only be executed in IE browsers, this code is ignored as comments in non-IE browsers. Different CSS, JS, HTML and server code can be loaded through IE conditional comments.
1.3 CSS property hack - special characters
1.3.1 Backslash (\)
        Applicable browsers: IE/Mac.
        The backslash (\) hack exploits a bug in IE/Mac. CSS comments ending in \*/ are not properly closed on IE/Mac, so statements that need to be ignored on IE/Mac can be placed after such comments.
        /* CSS comment: ignore the following statement on IE Mac\*/
        selector { ...styles... }
        /* Ignore the end*/
        Comment: test the above method is useless!
        Other usage:
        add "\9", "\0" and other characters after the CSS property value. "\9" only supports versions below IE10 (including IE10); "\0" only supports versions above IE8 (including IE8).
1.3.2 Underscore (_)
        Applicable browsers: IE6 and below.
        Underscore-prefixed properties are recognized by IE 6 and below, while other browsers ignore it.
        Note: This hack exploits browser bugs to use invalid CSS and is therefore not recommended.
1.3.3 Asterisk (*)
        Applicable browsers: IE7 and below
        IE7 and below can recognize attributes prefixed with non-alphabetic characters (commonly used: *, #, +, [), while other browsers will neglect.
        Note: This hack exploits browser bugs to use invalid CSS and is therefore not recommended.
1.4 CSS selector hack
1.4.1 :root selector
        :root IE browsers other than IE8 (including IE8) and other modern browsers support this CSS selector.
1.4.2 Asterisk HTML (*html)
        Applicable browsers: IE4-6.
        The HTML element is the root element of the W3C standard DOM, but there is also a mysterious parent element in versions 4 to 6 of IE. Fully compliant browsers will ignore this *html selector, but IE4-6 will handle it normally.
        Example:

* html p {font-size: 5em; }

        Note: This hack uses perfectly valid CSS.
1.4.3 Asterisk plus sign (*+)
        Applicable browser: IE7
        Example:

*:first-child+html p { font-size: 5em;} 或者：*+html p {font-size: 5em; }

        Note: Only works fine in IE7 standard model, not in quirks mode. At the same time, it is also supported by the compatibility mode of IE8 (equivalent to the standards mode of IE7). It also uses valid CSS.
1.4.4 Sub-selector (>)
        Applicable browsers: IE6 and above and non-IE browsers
        IE6 and below do not support sub-selector (>), you can use this to specify special rules for other browsers.
        Example:

html > body p { color: blue; }

1.4.5 Add comments to sub-selectors (>/**/)
        Applicable browsers: IE7 (excluding IE7) and above and non-IE browsers
        Although IE7 supports sub-selectors, you can also use the following hacking methods to make IE7 also exclude. When an empty comment immediately follows a subselector, IE7 will not recognize the following rule, just like older browsers.
        Example:

html >/**/ body p { color: blue; }

1.5 Conditional comments
1.5.1 Operators
        The operators in the html conditional comments are all comparison operators, and their return values are all boolean values, and their operation results are the same as Javascript's comparison operators. Operators include: NOT operator (!), less than operator (lt), less than or equal to operator (lte), greater than operator (gt), greater than or equal to operator (gte), subexpression (()), AND operator (&) and OR operator (|).
        Syntax example:

        <!--[if !IE]><!-->
            Recognized except IE.
        <!--<![endif]-->
        <!--[if IE]>
            All IE recognized.
        <![endif]-->
        <!--[if IE 6]>
            Only recognized by IE6. //6, an integer or floating point label corresponding to the browser version
        <![endif]-->
        <!--[if lt IE 6]>
            IE6 and below versions can be recognized.
        <![endif]-->
        <!--[if gte IE 6]>
            IE6 and above versions can be recognized.
        <![endif]-->

Example: jQuery version compatibility

<!--[if !IE]><!-->
    <script src="http://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<!--<![endif]-->
<!--[if lte IE 9]>
    <script src="https://cdn.bootcss.com/jquery/1.8.3/jquery.min.js"></script>
<![endif]-->

        Note: Conditional comments are no longer supported in standards mode as of IE10.
1.6 Summary
        CSS hack can solve the difference of CSS display between browsers, but after all, it does not conform to the W3C specification, so writing CSS is still in accordance with the standard, which is also very beneficial for future maintenance. When using it, you need to follow the following three principles:
        Effective: The verification that can pass the Web standard is
        only for the browsers that are too old/no longer developed/abandoned, not the current mainstream browsers.
        Code is ugly. Let people remember this is a last resort hack, always remember to find a way to get rid of it. Many hacks have now abandoned the original principle, and abuse of the hack will cause more compatibility problems after browser updates.
        By using html conditional comments to directly set the style sheet loaded by the corresponding version of the browser in html, the differentiation of CSS styles can be achieved on the basis of ensuring CSS code specifications.
        A special CSS hack, "[;background:#F00;];" is only recognized by webkit kernel browsers (Chrome [early versions], Safari), IE7 and below. It's worth noting that the three semicolons in this rule must be preserved.

Hack technical summary

Guess you like