浏览器兼容

2017-11-15 本文已影响0人饥人谷_adoreu

什么是 CSS hack

CSS hack由于不同厂商的浏览器，比如Internet Explorer,Safari,Mozilla Firefox,Chrome等，或者是同一厂商的浏览器的不同版本，如IE6和IE7，对CSS的解析认识不完全一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。这个时候我们就需要针对不同的浏览器去写不同的CSS，让它能够同时兼容不同的浏览器，能在不同的浏览器中也能得到我们想要的页面效果。
比如.kwstu{width:300px;_width:200px;}，一般浏览器会先给元素使用width:300px;的样式，紧接着后面还有个_width:200px;由于下划线_width只有IE6可以识别，所以此样式在IE6中实际设置对象的宽度为200px，后面的把前面的给覆盖了，而其他浏览器不识别_width不会执行_width:200px;这句样式，所以在其他浏览器中设置对象的宽度就是300px;

谈一谈浏览器兼容的思路

要不要做
- 产品的角度（产品的受众、受众的浏览器比例、效果优先还是基本功能优先）
- 成本的角度 (有无必要做某件事)
做到什么程度
- 让哪些浏览器支持哪些效果
如何做
- 根据兼容需求选择技术框架/库(jquery)
- 根据兼容需求选择兼容工具(html5shiv.js、respond.js、css reset、normalize.css、Modernizr)
- postCSS
- 条件注释、CSS Hack、js 能力检测做一些修补

列举5种以上浏览器兼容的写法

条件注释法.是于HTML源码中被IE有条件解释的语句。条件注释可被用来向IE提供及隐藏代码。使用了条件注释的页面在 Windows Internet Explorer 9 中可正常工作，但在 Internet Explorer 10 中无法正常工作。

<!--[if IE]>此内容只有IE可见<![endif]-->
<!--[if IE 6.0]>此内容只有IE6.0可见<![endif]-->

 <!--[if IE 6]>
 <p>You are using Internet Explorer 6.</p>
 <![endif]-->
 <!--[if !IE]><!-->
 <script>alert(1);</script>
 <!--<![endif]-->
 <!--[if IE 8]>
 <link href="ie8only.css" rel="stylesheet">
 <![endif]-->

项目	范例	说明
！	[if !IE]	非IE
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
I	[if (IE 6)I(IE 7)]	IE6或者IE7

属性前缀法(即类内部Hack)：例如 IE6能识别下划线""和星号" * "，IE7能识别星号" * "，但不能识别下划线""，IE6~IE10都认识"\9"，但firefox前述三个都不能认识。

.box{
  color: red;
  _color: blue; /*ie6*/
  *color: pink; /*ie67*/
  color: yellow\9;  /*ie/edge 6-8*/
}

选择器前缀法(即选择器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有效

根据兼容需求选择合适的技术框架
- Bootstrap (>=ie8)
- jQuery 1.~ (>=ie6), jQuery 2.~ (>=ie9)
- Vue (>= ie9)
根据兼容需求选择兼容工具
- html5shiv.js ：在IE6~8（不支持html5标签）上模拟html5标签
- respond.js ：在IE6~8（不支持css3）上模拟CSS3 Media Queries
- CSS Reset和Normalize.css
- Modernizr.js：他会为浏览器的html标签生成一批的css的class名称，标记当前浏览器支持和不支持的特性。我们利用html标签上的类名，就可以为不同版本的不同浏览器添加兼容样式

以下工具/名词是做什么的

条件注释 (conditional comment) 是于HTML源码中被IE有条件解释的语句。条件注释可被用来向IE提供及隐藏代码。

    <!--[if IE 6]>
    <p>You are using Internet Explorer 6.</p>
    <![endif]-->
    <!--[if !IE]><!-->
    <script>alert(1);</script>
    <!--<![endif]-->
    <!--[if IE 8]>
    <link href="ie8only.css" rel="stylesheet">
    <![endif]-->

使用了条件注释的页面在 Windows Internet Explorer 9 中可正常工作，但在 Internet Explorer 10 中无法正常工作。

IE Hack 针对不同版本的IE浏览器，使用特殊的符号或者方式，让它能同时在不同版本的IE浏览器中都能得到我们想要的页面效果。
js 能力检测最常用的也是最广泛使用的客户端检测技术是能力检测（特性检测）。能力检测的目标不是识别特定的浏览器，而是识别浏览器的能力。使用这种方式无需顾及浏览器如何如何，只需确定浏览器是否支持特定的能力，就可以给出相关的方案。参考
html5shiv.js主要解决HTML5提出的新的元素不被IE6-8识别，这些新元素不能作为父节点包裹子元素，并且不能应用CSS样式。让CSS 样式应用在未知元素上只需执document.createElement(elementName)即可实现。html5shiv就是根据这个原理创建的。参考
html5shiv的使用非常的简单，考虑到IE9是支持html5的，所以只需要在页面head中添加如下代码即可：

<!--[if lt IE 9]>
    <script src="bower_components/html5shiv/dist/html5shiv.js"></script>
<![endif]-->

respond.js是一个快速、轻量的 polyfill，用于为 IE6-8 以及其它不支持 CSS3 Media Queries 的浏览器提供多媒体查询的 min-width 和 max-width 特性，实现响应式网页设计（Responsive Web Design）。参考
1.在css中正常用 min/max-width media queries

@media screen and (min-width: 480px){
        ...styles for 480px and up go here
    }

2.引入respond.min.js，但要在css的后面（越早引入越好，在ie下面看到页面闪屏的概率就越低，因为最初css会先渲染出来，如果respond.js加载得很后面，这时重新根据media query解析出来的css会再改变一次页面的布局等，所以看起来有闪屏的现象）

css reset 将浏览器的默认样式全部去掉;通过重新定义标签样式,“覆盖”浏览器的CSS默认属性。
normalize.css 是一个很小的CSS文件，但它在默认的HTML元素样式上提供了跨浏览器的高度一致性。相比于传统的CSS reset,Normalize.css是一种现代的、为HTML5准备的优质替代方案。
关于css reset与normalize.css的区别参考
Modernizr 是一个用来检测浏览器功能支持情况的 JavaScript 库。目前，通过检验浏览器对一系列测试的处理情况，Modernizr 可以检测18项 CSS3 功能以及40多项关于HTML5 的功能。它比传统检测浏览器名称（浏览器嗅探）的方式更为可靠。一整套测试的执行时间仅需几微秒。此外，Modernizr 网站通过定制脚本只对你感兴趣的元素进行检测，从而实现效率优化。
postCSS 本身是一个功能比较单一的工具。它提供了一种方式用 JavaScript 代码来处理 CSS。它负责把 CSS 代码解析成抽象语法树结构（Abstract Syntax Tree，AST），再交由插件来进行处理。插件基于 CSS 代码的 AST 所能进行的操作是多种多样的，比如可以支持变量和混入（mixin），增加浏览器相关的声明前缀，或是把使用将来的 CSS 规范的样式规则转译（transpile）成当前的 CSS 规范支持的格式。从这个角度来说，PostCSS 的强大之处在于其不断发展的插件体系。目前 PostCSS 已经有 200 多个功能各异的插件。开发人员也可以根据项目的需要，开发出自己的 PostCSS 插件。

一般在哪个网站查询属性兼容性？

caniuse.com