浏览器兼容性问题解决
- 如何发现问题：QuirksMode、 CanlUse
- 如何解决问题：BrowserHacks、ES5Shim、ES6Shim
- 如何把事做绝：渐进增强，Modernizr、Feature.js
发现兼容性问题的工具网站
QuirksMode -- 兼容性列表
网址：Compatibility overview (quirksmode.org)
CanlUse -- 查询 JS 特性/CSS 属性 HTML5 等代码浏览器支持和兼容性情况
网址：Can I use... Support tables for HTML5, CSS3, etc
中国的每种浏览器的市场份额，和每种浏览器的版本是否兼容代码
浏览器的对比功能...
解决浏览器兼容性问题（适配浏览器）
BrowserHacks
网址：Browserhacks
各个浏览器的兼容性 CSS 前缀，和 JavaScript 代码如何去兼容各种浏览器
Shim
什么是 Shim？
对应不支持的代码特性，通过修改或添加老的浏览器的原型方法，使它拥有那些方法
ES5Shim
网址：es5-shim - npm Package Health Analysis | Snyk
ES6Shim
GitHub：es-shims/es6-shim: ECMAScript 6 compatibility shims for legacy JS engines (github.com)
ES7Shim
渐进增强
Modernizr
官网：Modernizr: the feature detection library for HTML5/CSS3
参考文章：Modernizr 的介绍和使用 - Joanna Qian - 博客园 (cnblogs.com)
传统浏览器目前不会被完全取代，令你难以将最新的 CSS3 或 HTML5 功能嵌入你的网站。
Modernizr 正是为解决这一难题应运而生，作为一个开源的 JavaScript 库，Modernizr 检测浏览器对 CSS3 或 HTML5 功能支持情况。 Modernizr 并非试图添加老版本浏览器不支持的功能，而是令你通过创建可选风格配置修改页面设计。 它也可以通过加载定制的脚本来模拟老版本浏览器不支持的功能。
Modernizr 是一个开源的 JS 库，它使得那些基于访客浏览器的不同（指对新标准支持性的差异）而开发不同级别体验的设计师的工作变得更为简单。它使得设计师可以在支持HTML5和 CSS3 的浏览器中充分利用HTML5和 CSS3 的特性进行开发，同时又不会牺牲其他不支持这些新技术的浏览器的控制。
当你在网页中嵌入 Modernizr 的脚本时，它会检测当前浏览器是否支持 CSS3 的特性，比如 @font-face、border-radius、 border-image、box-shadow、rgba() 等，同时也会检测是否支持HTML5的 特性——比如 audio、video、本地储存、和新的 input 标签的类型和属性等。在获取到这些信息的基础上，你可以在那些支持这些功能的浏览器上使用它们，来决定是否创建一个基于 JS 的 fallback，或者对那些不支持的浏览器进行简单的优雅降级。另外，Modernizr 还可以令 IE 支持对HTML5的元素应用 CSS 样式，这样开发者就可以立即使用这些更富有语义化的标签了。
基于 Modenizr 做渐进增强步骤
- 下载安装：modenizr
- 获取配置：自定义构建
- 下载地址里面有添加构建需要支持的方法和标签配置
- 生成构建：命令行用法
- 选择完需要构建的配置后，点击右上角粉红色按钮：”BUILD“
- 引人脚本：直接页面引用
- ”BUILD“构建后，复制或者下载生成的代码
- 使用方法：JS + CSS
- 在项目种引入使用
Feature.js
GitHub：arielsalminen/feature.js
文章参考：Feature.js 是一款轻量级的浏览器特性检测 JavaScript 库插件-面圈网 (mianshigee.com)
Feature.js 是一款轻量级的浏览器特性检测 JavaScript 库插件。该插件运行速度快，使用简单，文件只有 1kb 大小。通过 Feature.js 你可以检测客户浏览器是否支持某些特性，并针对这些特性编写代码。