转:浏览器兼容

1.什么是 CSS hack

CSS hack因为不一样厂商的浏览器，好比Internet Explorer,Safari,Mozilla Firefox,Chrome等，或者是同一厂商的浏览器的不一样版本，如IE6和IE7，对CSS的解析认识不彻底同样，所以会致使生成的页面效果不同，得不到咱们所须要的页面效果。 这个时候咱们就须要针对不一样的浏览器去写不一样的CSS，让它可以同时兼容不一样的浏览器，能在不一样的浏览器中也能获得咱们想要的页面效果。
简单的说，CSS hack的目的就是使你的CSS代码兼容不一样的浏览器。固然，咱们也能够反过来利用CSS hack为不一样版本的浏览器定制编写不一样的CSS效果。
CSS Hack大体有三种表现形式 ：

• css属性前缀法
• 选择器前缀法
• IE条件注释法

2.谈一谈浏览器兼容的思路

• 1.要不要作
  产品的角度（产品的受众，受众的浏览器比例，效果优先仍是基本功能优先）
  成本的角度（有无必要作某件事情）
• 2.作到什么程度
  让哪些浏览器去支持哪些效果

• 3.如何作
  1.根据兼容需求选择技术框架/库（Bootstrap (>=ie8),jQuery 1 (>=ie6), jQuery 2 (>=ie9),Vue (>= ie9)
  2.根据兼容需求选择兼容工具(html5shiv.js/respond.js/css reset/normalize.css/modernizr/postCSS）
  3.条件注释/css Hack/js　能力检测作一些修补

• 4.关于浏览器兼容的应对策略(渐进加强和优雅降级)
  渐进加强 progressive enhancement：
  概念：针对低版本浏览器进行构建页面，保证最基本的功能，而后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
  观点：“渐进加强”观点认为应关注于内容自己。
  内容是咱们创建网站的诱因。有的网站展现它，有的则收集它，有的寻求，有的操做，还有的网站甚至会包含以上的种种，但相同点是它们全都涉及到内容。这使得“渐进加强”成为一种更为合理的设计范例。这也是它当即被 Yahoo! 所采纳并用以构建其“分级式浏览器支持 (Graded Browser Support)”策略的缘由所在。
  优雅降级 graceful degradation：
  概念：一开始就构建完整的功能，而后再针对低版本浏览器进行兼容。
  观点：“优雅降级”观点认为应该针对那些最高级、最完善的浏览器来设计网站。而将那些被认为“过期”或有功能缺失的浏览器下的测试工做安排在开发周期的最后阶段，并把测试对象限定为主流浏览器（如 IE、Mozilla 等）的前一个版本。
  在这种设计范例下，旧版的浏览器被认为仅能提供“简陋却无妨 (poor, but passable)” 的浏览体验。你能够作一些小的调整来适应某个特定的浏览器。但因为它们并不是咱们所关注的焦点，所以除了修复较大的错误以外，其它的差别将被直接忽略。
  区别：优雅降级是从复杂的现状开始，并试图减小用户体验的供给，而渐进加强则是从一个很是基础的，可以起做用的版本开始，并不断扩充，以适应将来环境的须要。降级（功能衰减）意味着往回看；而渐进加强则意味着朝前看，同时保证其根基处于安全地带。

3.浏览器兼容的写法

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

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

• 选择器前缀法

  *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有效

• 条件注释法
  这种方式是IE浏览器专有的Hack方式，微软官方推荐使用的hack方式

  <!--[if IE]> 这段文字只在IE浏览器显示 <![endif]--> <!--[if IE 6]> 这段文字只在IE6浏览器显示 <![endif]--> <!--[if gte IE 6]> 这段文字只在IE6以上(包括)版本IE浏览器显示 <![endif]--> <!--[if ! IE 8]> 这段文字在非IE8浏览器显示 <![endif]--> <!--[if !IE]> 这段文字只在非IE浏览器显示 <![endif]-->

  4.如下工具/名词是作什么的

• 条件注释
  条件注释 是于HTML源码中被 IE 有条件解释的语句。条件注释可被用来向 IE提供及隐藏代码。 条件注释最初于微软的 Internet Explorer 5浏览器中出现，而且直至 Internet Explorer 9 均支持。微软已宣布于IE10中止支持。具体代码如上已给出。

• IE Hack
  针对IE浏览器编写不一样的CSS的让IE可以正常渲染的过程

• js 能力检测
  能力检测又称特性检测。能力检测的目的不是识别具体的浏览器，而是识别浏览器的能力。
  能力检测的目的应该是根据你须要的特性来选择问题的解决方案，而不是检测用户在用什么浏览器。并且在检测时要保证你要用到的能力确实存在，本身不要作过多的推测，代码也不要作过多的判断。
  两个重要的概念：
  第一个概念是先检测达成目的的最经常使用的特性。先检测最经常使用的特性，能够保证代码最优化，由于在多数状况下均可以免测试多个条件。
  第二个概念是必须测试实际要用到的特性。一个特性存在，不必定意味着另外一个特性也存在。

• html5shiv.js
  IE 9以前的版本几乎不支持HTML5元素和其它HTML5特性。
  HTML5 Shiv支持在旧版Internet Explorer（IE9以前）中使用HTML5细分元素，并为Internet Explorer 6-9，Safari 4.x（和iPhone 3.x）和Firefox 3.x提供基本的HTML5样式。

• respond.js
  响应式布局，理想状态是，对PC/移动各类终端进行响应。媒体查询的支持程度是IE9+以及其余现代的浏览器，可是IE8在市场当中仍然占据了比较大量的市场份额，使咱们不得不进行IE低端浏览器的考虑。那么如何在IE6~8浏览器中兼容响应式布局呢？这里咱们须要借助这样一个文件：respond.js
  Respond.js 是一个快速、轻量的 polyfill，用于为 IE6-8 以及其它不支持 CSS3 Media Queries 的浏览器提供媒体查询的 min-width 和 max-width 特性，实现响应式网页设计。
• css reset
  css reset是经过从新定义标签样式，把浏览器的默认样式覆盖掉，以便保持个浏览器渲染的一致性。相对暴力

• normalize.css
  normalize.css是reset.css的替代方案，保留有用的浏览器默认样式，同时进行一些bug的修复。相对平和

• Modernizr
  Modernizr是一套JavaScript 库，用来侦测浏览器是否支持 CSS3 或 HTML5 功能支持状况等。若是浏览器不支持，Modernizr会使用其余的解决方法来进行模拟。
  Modernizr 会在页面加载后当即检测特性；而后建立一个包含检测结果的 JavaScript 对象，同时在 html 元素加入方便你调整 CSS 的 class 名。

• postCSS
  PostCSS是一个使用JS插件转换样式的工具。这些插件能够删除您的CSS，支持变量和混合，透明将来的CSS语法，内联图像等。
  PostCSS不是预处理器自己; 它不会转换CSS。事实上，它自己根本不作任何事。它所作的是提供一个CSS解析器和一个框架，用于建立能够分析，lint，处理资产，优化，建立回退，不然转换解析的CSS的插件。PostCSS将CSS解析为抽象语法树（AST），经过一系列插件将其传递，而后PostCSS核心为插件更改的树生成一个新的CSS字符串。。若是你熟悉JavaScript工具，那么你能够认为PostCSS 为CSS的Babel。
  PostCSS目前有200多个插件，其中不少在PostCSS GitHub页面上列出，而其余的能够在有用的PostCSS目录postcss.parts中找到。PostCSS能够集成在大多数构建工具中，包括Gulp，Grunt，webpack或npm。
  PostCSS被行业领导者使用，包括维基百科，Twitter，阿里巴巴和JetBrains。该 Autoprefixer PostCSS插件是最流行的CSS处理器之一。

5.通常在哪一个网站查询属性兼容性？

http://browserhacks.com/
http://caniuse.com/