WEB 浏览器兼容 推荐收藏

下面是关于WEB浏览器兼容推荐收藏的完整攻略。

什么是WEB 浏览器兼容？

WEB浏览器兼容是指一种 WEB 站点可被多种浏览器在不同操作系统环境下展现，且表现基本一致的能力。WEB的兼容性是 WEB 应用开发中最为重要的成果之一，无论是在美观还是用户体验上都占据重要地位。

为什么需要WEB 浏览器兼容？

随着不同操作系统和不同版本的浏览器的出现，WEB 在不同的浏览器上表现各异，可能在一个浏览器上能良好的运行，而在另一个浏览器上可能无法正常工作。为了解决这个问题，WEB开发人员就需要考虑到如何使WEB站点在各种浏览器上完美表现，从而提升用户的体验。

如何进行WEB浏览器兼容？

以下是几种常见的WEB 浏览器兼容处理方式：

1. 渐进增强：首先确定一个最小的功能集，这个功能集能够在所有主流浏览器上正确显示和使用，然后适配其他浏览器功能，这样可以保证在老旧的浏览器上展现出最小的样式，提供最小的交互功能。例如，可以对于不支持 CSS3 的浏览器，使用 CSS 2 的样式方式来代替。

2. 优雅降级：首先应用最先进的技术，然后再检测浏览器是否支持这些技术。如果不支持，就回退到更基础的解决方案。例如，当使用 HTML5 新元素时，如果浏览器不支持 HTML5，就回退到使用 div 标签。

3. 浏览器嗅探：使用嗅探技术，检测当前浏览器类型和版本，针对不同的浏览器版本进行不同的处理。例如，可以检测当前使用的 IE 浏览器的版本，使用不同的 CSS 来适配不同版本的 IE 浏览器。

推荐收藏的浏览器兼容性资源

以下是几个推荐收藏的浏览器兼容性资源：

1. Can I Use：这个网站提供了 WEB 浏览器的兼容性数据，网站能够告诉你所使用的特定的 HTML、CSS、JavaScript 特性是否被所有主要的浏览器所支持，甚至还能根据浏览器的版本号来查询是否支持。

2. Browser Stack：这是一个强大的工具，可以模拟不同版本的操作系统和浏览器，检测你的站点在不同的环境下的表现，并提供了优化建议。

示例说明

1. 对于渐进增强的处理方式，假设我们使用 CSS3 的新属性，如css3部分圆角。但是由于一些老旧的浏览器(比如IE6和IE7)不支持css3较新的属性，这时我们就可以选择使用css2的样式方式来代替，使用圆角图片来模拟部分圆角的效果。

/* css3部分圆角 */
.rounded {
  border-radius: 10px 10px 0 0;
}

/* css2部分圆角 */
.rounded {
  background-image: url('rounded.png');
}

1. 对于优雅降级的处理方式，假设我们使用HTML5的元素<video>和<audio>播放视频和音频。但是由于一些老旧的浏览器(比如IE8和IE9)不支持HTML5，这时我们就可以通过检测浏览器支不支持HTML5，然后回退到使用Flash来代替。

if (Modernizr.audio || Modernizr.video) {
   // 使用HTML5来播放媒体
} else {
   // 回退到Flash媒体播放器
}