Hack技术总结

1.1概述
        由于各大浏览器尤其IE浏览器对web标准支持情况不一，导致标准的网页在各个浏览器中的表现不一，因此，解决各浏览器兼容性问题成为了前端工程师最重要的工作之一，而所谓的hack技术则是前端开发中必用的。
1.2 hack常见形式
        CSS Hack常见的有三种形式：CSS属性Hack、CSS选择器Hack以及IE条件注释Hack， Hack主要针对IE浏览器。
        1、属性级Hack：在CSS属性前加上一些特殊的字符，不同浏览器识别不同的字符从而达到兼容的效果。
        2、选择符级Hack：在CSS选择器前加上一些只有特定浏览器能识别的选择器从而到达兼容的效果。
        3、IE条件注释Hack：IE条件注释是微软IE5开始就提供的一种非标准逻辑语句。这类Hack不仅对CSS生效，对写在判断语句里面的所有代码都会生效。
        注意：条件注释只有在IE浏览器下才能执行，这个代码在非IE浏览下被当做注释视而不见。可以通过IE条件注释载入不同的CSS、JS、HTML和服务器代码等。
1.3 CSS属性hack——特殊字符
1.3.1反斜线（\）
        适用浏览器：IE/Mac。
        反斜线（\）hack利用了IE/Mac的一个bug。以\*/结束的css 注释在IE/Mac上是不正确关闭的，所以那些需要在IE/Mac上被忽略的语句可以放在这种注释后面。
        /* CSS注释：在IE Mac上忽略下面的语句 \*/
        selector { ...styles... }
        /* 忽略结束 */
        注释：亲测上述方法无用！
        其他用法：
        在CSS属性值后面加“\9”，“\0”等字符。“\9”只支持IE10（包括IE10）以下版本；“\0”只支持IE8（包括IE8）以上的版本。
1.3.2下划线（_）
        适用浏览器：IE6及其以下版本。
        IE 6 及以下的版本可以识别带有下划线前缀的属性，而其它浏览器会忽略它。
        注意：这个hack利用浏览器的bug使用了无效的CSS，因而不推荐使用。
1.3.3 星号（*）
        适用浏览器：IE7及以下版本
        IE7及以下的版本可以识别以非字母字符（常用的有：*、#、+、[）为前缀的属性，而其它浏览器会忽略。
        注意：这个hack利用浏览器的bug使用了无效的CSS，因而不推荐使用。
1.4 CSS选择符hack
1.4.1 :root选择符
        :root 除IE8（包括IE8）以外的IE浏览器及现代其他浏览器都支持此CSS选择符。
1.4.2星号HTML（* html）
        适用浏览器：IE4-6。
        HTML元素是W3C标准DOM的根元素，但是IE 4至6的版本中还有一个神秘的父元素。完全兼容的浏览器会忽略这个* html选择器，但IE4-6却会对它正常处理。
        Example：

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

        注意：这个hack使用了完全有效的CSS。
1.4.3星号加号（*+）
        适用浏览器：IE7
        Example：

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

        注意：只在IE7标准模型里工作正常，在怪异模式下不能用。同时，也被IE8的兼容模式（相当于IE7的标准模式）所支持。它也使用了有效的CSS。
1.4.4子选择器（>）
        适用浏览器： IE6以上版本及非IE浏览器
        IE6及以下版本不支持子选择器（>），可以利用这个为其它浏览器指定特别的规则。
        Example：

html > body p { color: blue; }

1.4.5子选择器加注释（>/**/）
        适用浏览器： IE7（不包含IE7）以上版本及非IE浏览器
        虽然IE7支持对子选择器，但通过以下hack方法也可以把IE7也排除。当一个空的注释紧跟在子选择器的后面时，IE7会不识别后面的规则，就和较早版本的浏览器一样。
        Example：

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

1.5条件注释
1.5.1运算符
        html条件注释中的运算符都属于比较运算符，其返回值都是boolean值，其运算结果与Javascript的比较运算符一样。运算符都包括：NOT运算符（!）、小于运算符（lt）、小于或等于运算（lte）、大于运算符（gt）、大于或等于运算（gte）、子表达式（()）、AND运算符（&）及OR运算符（|）。
        语法实例：

        <!--[if !IE]><!-->
            除IE外都可识别。
        <!--<![endif]-->
        <!--[if IE]>
            所有的IE可识别。
        <![endif]-->
        <!--[if IE 6]>
            仅IE6可识别。//6，一个整数或浮点标号对应于浏览器的版本
        <![endif]-->
        <!--[if lt IE 6]>
            IE6以下版本可识别。
        <![endif]-->
        <!--[if gte IE 6]>
            IE6以及IE6以上版本可识别。
        <![endif]-->

实例：jQuery版本的兼容

<!--[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]-->

        注意：自IE10起，标准模式不再支持条件注释。
1.6总结
        CSS hack虽然可以解决个浏览器之间css显示的差异问题，但是毕竟不符合W3C规范，所以写CSS还是按照标准来，这样对以后维护也是大有好处的，实在不行再用。用的时候需要遵循以下三条原则：
        有效：能够通过Web标准的验证
        只针对太古老的/不再开发的/已被抛弃的浏览器，而不是目前的主流浏览器。
        代码要丑陋。让人记住这是一个不得已而为之的 Hack, 时刻记住要想办法去掉它。现在很多hacks已经抛弃了最初的原则，而滥用hack会导致浏览器更新之后产生更多的兼容性问题。
        利用html条件注释直接在html里面设定相应版本的浏览器所对应加载的样式表的方式就可以在保证CSS代码规范的基础上又实现CSS样式的差异化了。
        一个特殊的CSS hack，“[;background:#F00;];”只有webkit内核浏览器（Chrome[早期版本]、Safari）、IE7及以下版本浏览可以识别。值得注意的是该规则中的三个分号必须保留。

Hack技术总结

猜你喜欢