入门12 浏览器兼容

CSS hack

不同厂商的流览器或某浏览器的不同版本（如IE6-IE11,Firefox/Safari/Opera/Chrome等），对CSS的支持、解析不一样，导致在不同浏览器的环境中呈现出不一致的页面展现效果。为了获得统一的页面效果，需要针对不同的浏览器或不同版本写特定的CSS样式，我们把这个针对不同的浏览器/不同版本写相应的CSS code的过程，叫做CSS hack

浏览器兼容的思路

• 要不要做

• 产品的角度（产品的受众、受众的浏览器比例、效果优先还是基本功能优先）
• 成本的角度 (有无必要做某件事)

• 做到什么程度

• 让哪些浏览器支持哪些效果

• 如何做

• 根据兼容需求选择技术框架/库(jquery)
• 根据兼容需求选择兼容工具(html5shiv.js、respond.js、css reset、normalize.css、Modernizr)
• postCSS
• 条件注释、CSS Hack、js 能力检测做一些修补

浏览器兼容的写法（5种以上）

• 条件注释

项目	说明	范例
!	非	[if !IE]，非IE
｜	或	[if (IE 6)｜(IE 7)]，IE6或者IE7
lt	小于	[if lt IE 5.5]，小于IE 5.5
lte	小于等于	[if lte IE 6]，小于等于IE6
gt	大于	[if gt IE 5]，大于 IE5
gte	大于等于	[if gte IE 7]，大于等于IE7

• 属性前缀法
  IE6能识别 * _
  IE7能识别 *
  “-″减号是IE6专有的hack
  “\9”IE6~IE10都生效
  “\0” IE8/IE9/IE10都生效，是IE8/9/10的hack
  “\9\0” 只对IE9/IE10生效，是IE9/10的hack
  示例：

.box {
   color: red;
   _color: blue;  /*ie6*/
   *color: green; /*ie6 7*/
   color: yellow/9; /*ie6-10*/
}

• 选择器前缀法
  选择器前缀法是针对一些页面表现不一致或者需要特殊对待的浏览器，在CSS选择器前加上一些只有某些特定浏览器才能识别的前缀进行hack。

*html *前缀只对IE6生效 
*+html *+前缀只对IE7生效 
@media screen\9{...}只对IE6/7生效 
@media \0screen {body { background: red; }}只对IE8有效 
@media \0screen\,screen\9{body { background: blue; }}只对IE6/7/8有效 
@media screen\0 {body { background: green; }} 只对IE8/9/10有效 
@media screen and (min-width:0\0) {body { background: gray; }} 只对IE9/10有效 
@media screen and (-ms-high-contrast: active),
 (-ms-high-contrast: none) {body { background: orange; }} 只对IE10有效

• 条件注释结合类选择器整体优化

优点：不用在CSS代码的属性前加入令人费解的前缀（*或_）

• Modernizr工具
  首先下载自定义的脚本,像引用普通js文件一样引用它
  
  添加完Modernizr引用以后，它就立即生效了。运行的时候它会在html元素上添加一批CSS的class名称，这些class名称标记当前浏览器支持哪些特性和不支持哪些特性，支持的特性就直接显示该天特性的名称作为一个class（例如:canvas,websockets），不支持的特性显示的class是“no-特性名称”（例如：no-flexbox）。下面这段代码是运行在Chrome下的效果：

下面这段代码是运行在IE9下的效果：

也可结合HTML5/CSS3特性一起使用
可以直接使用Modernizr在元素里生成的class名称，在你的css文件里定义相应的属性以便支持当前浏览器。例如，下面的代码可以属性，在支持shadow阴影的浏览器显示shadow，不支持的浏览器显示标准的边框：

.boxshadow #MyContainer {
    border: none;
    -webkit-box-shadow: #666 1px 1px 1px;
    -moz-box-shadow: #666 1px 1px 1px;
}
.no-boxshadow #MyContainer {
    border: 2px solid black;
}

因为如果浏览器支持box-shadows的话，Modernizr就会将boxshadow class添加到元素，然后你可以将它管理到一个相应的div的id上。如果不支持，Modernizr就会将no-boxshadow class添加到元素，这样显示的就是一个标准的边框。这样我们就可以很方便地在支持CSS3特性的浏览器上使用CSS3新功能，不支持的浏览器上继续使用以前的方式。

各种工具/名词

• 条件注释
  是于HTML源码中被 IE 有条件解释的语句。条件注释可被用来向 IE提供及隐藏代码。 条件注释最初于微软的 Internet Explorer 5浏览器中出现，并且直至 Internet Explorer 9 均支持。IE10+不再支持条件注释。

• IE Hack
  针对不同版本的IE浏览器写的css，从而使各个版本IE能够顺利渲染页面。

• js 能力检测
  浏览器的能力检测目标不是检测特定的浏览器，而是检测浏览器的能力。这样，只需要检测浏览器是否支持特定的能力，就可以给出特定的解决方案。这一部分检测是解决浏览器兼容问题的主要检测。

• html5shiv.js
  通过模拟标签解决不支持HTML5新标签，新特性的浏览器的兼容问题。IE9以下的IE版本不支持HTML5

• respond.js
  用于为 IE6-8 以及其它不支持 CSS3 媒体查询功能的浏览器提供媒体查询的 min-width 和 max-width 特性，实现响应式网页设计

• css reset
  将所有的浏览器的自带样式重置掉，这样更易于保持各浏览器渲染的一致性参考文章

• normalize.css
  Normalize.css 是一个可以定制的CSS文件，它让不同的浏览器在渲染网页元素的时候形式更统一，在默认的HTML元素样式上提供了跨浏览器的高度一致性

  • Preserves useful defaults, unlike many CSS resets.
    保护有用的浏览器默认样式而不是完全去掉它们
  • Normalizes styles for a wide range of elements
    一般化的样式：为大部分HTML元素提供
  • Corrects bugs and common browser inconsistencies
    修复浏览器自身的bug并保证各浏览器的一致性
  • Improves usability with subtle improvements
    优化CSS可用性：用一些小技巧
  • Explains what code does using detailed comments
    解释代码：用注释和详细的文档来

• Modernizr
  odernizr 是一个 JavaScript 库，用于检测用户浏览器的 HTML5 与 CSS3 特性。Modernizr 使你可以方便地为各种情况编写 JavaScript 和 CSS，无论浏览器是否支持这些特性。这是处理渐进增强的完美方案。
  工作原理：
  Modernizr 会在页面加载后立即检测特性；然后创建一个包含检测结果的 JavaScript 对象，同时在 html 元素加入方便你调整 CSS 的 class 名。

• postCSS
  是一个JS插件转换样式表的工具。这些插件能够检验你的CSS、支持变量和混合，转化css3的新特性语法、行内图片等。

查询属性兼容性的网站？

• https://caniuse.com/

常用网站

• 查hack的写法
• Modernizr