浏览器兼容

什么是 CSS hack

• 由于不同厂商的浏览器，比如Internet Explorer,Safari,Mozilla Firefox,Chrome等，或者是同一厂商的浏览器的不同版本，如IE6和IE7，对CSS的解析认识不完全一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。 这个时候我们就需要针对不同的浏览器去写不同的CSS，让它能够同时兼容不同的浏览器，能在不同的浏览器中也能得到我们想要的页面效果，我们把这个针对不同的浏览器/不同版本写相应的CSS code的过程，叫做CSS hack!
• 原理：
  • 由于不同的浏览器对CSS的支持及解析结果不一样，还由于CSS中的优先级的关系。我们就可以根据这个来针对不同的浏览器来写不同的CSS。
• 分类：

  • CSS Hack大致有3种表现形式，CSS类内部Hack、选择器Hack以及HTML头部引用(if IE)Hack。

  • 属性前缀法(即类内部Hack)：例如 IE6能识别下划线""和星号" * "，IE7能识别星号" * "，但不能识别下划线""，IE6~IE10都认识"\9"，但firefox前述三个都不能认识。
    如： .class { *color: blue; } /* ie6/7 */

  • 选择器前缀法(即选择器Hack)：例如 IE6能识别*html .class{}，IE7能识别*+html .class{}或者*:first-child+html .class{}。

  • IE条件注释法(即HTML条件注释Hack)：针对所有IE(注：IE10+已经不再支持条件注释)： ，针对IE6及以下版本： 。这类Hack不仅对CSS生效，对写在判断语句里面的所有代码都会生效。
    如：以下代码只在IE下生效

浏览器兼容的思路

• 1.要不要做
  • 从产品的角度：产品受众、受众的浏览器比例、效果优先还是基本功能优先
  • 从成本的角度：有无必要付出过高的成本
• 2. 做到什么程度
  • 让哪些浏览器做到哪些效果
• 3.如何做
  • 根据兼容需求选择框架/库（jQeury）
  • 根据兼容需求选择兼容工具，如：html5shiv、respond、css reset、normalize、modernizr，等等（可自行搜索了解）
  • css hack、条件注释、使用js做一些浏览器检测，等等

一些浏览器兼容的写法

• IE 6的CSS Hack：

      .css-hack {   
        background-color: red; /* 其他浏览器上显示为红色 */  
        _background-color: blue; /* 只有IE 6浏览器上显示为蓝色 */  
      }  
  

• IE 7的CSS Hack：

    .css-hack {   
      color: red; /* 其他浏览器上显示为红色 */  
      +color: blue; /* 只有 IE 6、IE 7 浏览器上显示为蓝色 */  
      _color: red; /* 让 IE 6 复原为之前设置的颜色 */  
    }
  

• IE 8的CSS Hack

    有IE8支持嵌套如下@media类型查询语句：@media \0screen。
    .css-hack {   
      color: red; /* 其他浏览器显示红色 */  
    }   
    @media \0screen {   
      .css-hack { color: blue; } /* 只有IE 8显示蓝色 */  
    }
  

• HTML头部引用hack

    在小于IE9的版本下去调用html5shiv.js和respond.js他们的作用是使浏览器支持h5的新标签和媒体功能。
    <!--[if lt IE 9]>
        <script src="js/html5shiv.min.js"></script>
        <script src="js/respond.min.js"></script>
    <![endif]-->    
  

• 选择器hack

    /* IE 6 */
    * html .selector { 样式代码放这里} 
    /* IE 7 */
    *+html .selector { 样式代码放这里} 
  

• JS Hack

    /* 检测浏览器是否为IE 8 */
    (checkIE = document.createElement("b")).innerHTML = "<!--[if IE 8]><i></i><![endif]-->"; 
      var isIE = checkIE.getElementsByTagName("i").length == 1;
  

一些工具/名词的解释

• 条件注释：条件注释是一种安全的区分IE浏览器版本的语法，且被认为是取代针对IE css hack的首选办法。
• IE Hack：IE hack就是针对IE浏览器不同版本去写不同的CSS代码，从而让我们的页面在IE浏览器上能正常显示。
• js 能力检测：指利用JS去检测浏览器能否实现某些功能，目标是识别浏览器的能力而不是识别特定的浏览器。只需根据浏览器支持的功能给出解决方案。
• html5shiv.js：一种使低版本IE浏览器能够识别H5新标签的解决方案，只需引入一个js脚本即可生效。
• respond.js：一种使低版本IE浏览器能够识别CSS3媒体查询解决方案，只需引入一个js脚本即可生效。
• css reset：css reset就是重置样式，因为早期的浏览器支持和理解的CSS规范不同，导致渲染页面时效果不一致，会出现很多兼容性问题。为了解决这个问题出现了css reset。
• normalize.css：CSS Reset的泛滥使它逐渐淡出前端的视野，取而代之就是Normalize.css，Normalize.css是@necolas和@jon_neal 两位大牛花了几百个小时来研究不同浏览器的默认样式的差异而得出的结晶，Normalize.css 只是一个很小的CSS文件，但它在默认的HTML元素样式上提供了跨浏览器的高度一致性。
• Modernizr：Modernizr 是一套JavaScript 函式库，用来侦测浏览器是否支持次世代的网站技术，这些新的网站技术是来自仍在持续发展的HTML5 与 CSS3 规格。
• PostCSS: PostCSS 是一个使用 JS 插件来转换 CSS 的工具。这些插件可以支持使用变量，混入(mixin)，转换未来的 CSS 语法，内联图片等操作。
• 查询属性兼容性：https://caniuse.com/#home