浏览器兼容
Opened this issue · 0 comments
什么是浏览器兼容问题？
同一份代码，有的浏览器效果正常，有的不正常
- 不正常的原因是什么？(不支持? bug？)
- 如何让它展示正常?(条件注释？ 单独Hack？)
为什么会有浏览器兼容问题？
- 同一产品，版本越老 bug 越多
- 同一产品，版本越新，功能越多
- 不同产品，不同标准，不同实现方式
什么是 CSS hack？
- 由于不同厂商的浏览器，比如 Internet Explorer,Safari,Mozilla Firefox,Chrome 等，或者是同一厂商的浏览器的不同版本，如 IE6 和 IE7，对 CSS 的解析认识不完全一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。
这个时候我们就需要针对不同的浏览器去写不同的CSS，让它能在不同的浏览器中也能得到我们想要的页面效果。
谈一谈浏览器兼容的思路
要不要做
- 产品的角度（产品的受众、受众的浏览器比例、效果优先还是基本功能优先）
- 成本的角度 (有无必要做某件事)
做到什么程度
- 让哪些浏览器支持哪些效果
如何做
-
根据兼容需求选择技术框架/库(jquery)
-
根据兼容需求选择兼容工具(html5shiv.js、respond.js、css reset、normalize.css、Modernizr
-
条件注释、CSS Hack、js 能力检测做一些修补
渐进增强和优雅降级
渐进增强(progressive enhancement): 针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验
优雅降级 (graceful degradation): 一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。
几种浏览器兼容的写法
- 条件注释
eg：
<!--[if IE 6]-->
<p>You are using Internet Explorer 6.</p>
<![endif]-->
- CSS 属性前缀
eg：
div{
color:blue;
*color:red; /*如果在IE6或者7中，字体颜色为红色，否则为蓝色*/
}
- 选择器前缀（即选择器 Hack）
eg：
div\9{
color:yellow
}
- 条件注释结合选择器
eg：
<!DOCTYPE html>
<!--[if IEMobile 7 ]> <html dir="ltr" lang="en-US"class="no-js iem7"> <![endif]-->
<!--[if lt IE 7 ]> <html dir="ltr" lang="en-US" class="no-js ie6 oldie"> <![endif]-->
<!--[if IE 7 ]> <html dir="ltr" lang="en-US" class="no-js ie7 oldie"> <![endif]-->
<!--[if IE 8 ]> <html dir="ltr" lang="en-US" class="no-js ie8 oldie"> <![endif]-->
<!--[if (gte IE 9)|(gt IEMobile 7)|!(IEMobile)|!(IE)]><!--><html dir="ltr" lang="en-US" class="no-js"><!--<![endif]-->
- Modernizr工具
<html class=" js no-flexbox canvas canvastext no-webgl no-touch geolocation
postmessage no-websqldatabase no-indexeddb hashchange no-history
draganddrop no-websockets rgba hsla multiplebgs backgroundsize
no-borderimage borderradius boxshadow no-textshadow opacity
no-cssanimations no-csscolumns no-cssgradients no-cssreflections
csstransforms no-csstransforms3d no-csstransitions fontface
generatedcontent video audio localstorage sessionstorage
no-webworkers no-applicationcache svg inlinesvg smil svgclippaths">
- 浏览器兼容写法
transition: transform 1s;
-moz-transition: transform 1s; /* Firefox 4 */
-webkit-transition: transform 1s; /* Safari 和 Chrome */
-o-transition: transform 1s; /* Opera */
常见属性的兼容情况
inline-block: >=ie8
min-width/min-height: >=ie8
:before,:after: >=ie8
div:hover: >=ie7
inline-block: >=ie8
background-size: >=ie9
圆角: >= ie9
阴影: >= ie9
动画/渐变: >= ie10
以下工具/名词是做什么的？
条件注释
- 条件注释 (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 中无法正常工作。
| 项目 | 范例 | 说明 |
|---|---|---|
| ！ | [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 |
IE Hack
针对IE浏览器编写不同的CSS，使得在IE浏览器中也能得到我们想要的页面效果
js 能力检测
能力检测的目标不是识别特定的浏览器，而是识别浏览器的能力。使用这种方式无需顾及浏览器如何如何，只需确定浏览器是否支持特定的能力，就可以给出相关的方案。
用于解决IE9以下版本浏览器对HTML5新增标签不识别，并导致CSS不起作用的问题，使用Javascript来使不支持HTML5的浏览器支持HTML标签。
让不支持 css3 Media Query 的浏览器包括 IE6-IE8 等其他浏览器支持查询。
早期的 CSS Reset 的作用就是清除所有浏览器默认样式，这样更易于保持各浏览器渲染的一致性。
这样暴力清零会带来一些问题，eg：
- *{ margin:0; padding:0; }会带来性能问题
- 使用通配符存在隐性问题
- 过渡的标签重置等于画蛇添足
- 过渡的标签重置导致语言元素失效
是一个可定制的 CSS 文件，使浏览器呈现的所有元素，更一致和符合现代标准；是在现代浏览器环境下对于CSS reset的替代。
该项目依赖于研究浏览器默认元素风格之间的差异，精确定位需要重置的样式。相比于传统的CSS Reset，Normalize.css是一种现代的、为HTML5准备的优质替代方案。Normalize.css现在已经被用于Twitter Bootstrap、HTML5 Boilerplate、GOV.UK、Rdio、CSS Tricks 以及许许多多其他框架、工具和网站上。
作用：
- 保护有用的浏览器默认样式而不是完全去掉它们
- 为大部分HTML元素提供一般化的样式
- 修复浏览器自身的bug并保证各浏览器的一致性
- 用一些小技巧优化CSS可用性
- 用注释和详细的文档来解释代码
一个 JavaScript 库，用于检测用户浏览器的 HTML5 与 CSS3 特性。Modernizr 会在页面加载后立即检测特性；然后创建一个包含检测结果的 JavaScript 对象，同时在 html 元素加入方便你调整 CSS 的 class 名。
PostCSS 是一个使用 JS 插件来转换 CSS 的工具。这些插件可以支持使用变量，混入(mixin)，转换未来的 CSS 语法，内联图片等操作。
一般在哪个网站查询属性兼容性？
- 浏览器市场份额
- caniuse.com 查 CSS属性兼容
- browserhacks 查 Hack 的写法