windows系统下主流浏览器(包括IE浏览器)对Vue技术栈支持性调查

Posted 2023-04-23

参考技术A   公司接到了个国企大项目，系统要windows，要求必须兼容xp系统，是否兼容IE8浏览器再商量，我们之前的项目主要是用vue、react技术栈完成的，在项目开始前，我进行了调研工作。

主流浏览器支持安装的最高版本号

主流浏览器对Vue支持的最低版本号

  Vue 不支持 IE8 及以下版本，因为 Vue 使用了 IE8 无法模拟的ECMAScript 5特性Object.defineProperty实现数据追踪，故不支持IE8及更低版本的浏览器，但它支持所有兼容 ECMAScript 5 的浏览器。

xp系统下能安装的主流浏览器最高版本号

主流浏览器支持canvas、svg的最低版本号

主流浏览器对Vue-UI框架常用的css3属性支持的最低版本号

主流浏览器对于Vue-UI框架的支持度分析
  我对国内最热门的Vue UI框架element-ui着重进行调查，element-ui对IE10及以上的浏览器兼容性好，对IE9浏览器支持不好，原因从上表就可以得知，IE9对css3的支持度不好，大多数css3属性都不支持，而element-ui的一些组件又是基于css3开发的，如el-row、el-col、el-upload组件在IE9上无法使用，el-input、el-table组件在IE9上部分功能也用不了。

总结
  本次总部项目要求支持xp系统，xp系统最高只能安装IE8浏览器，因为vue设计特性的原因，vue只在IE9及以上浏览器才能运行，但IE9对css3支持较差，vue生态对IE10以上的浏览器才展现良好的支持性。所以如果决定使用vue技术栈，就要抛弃IE8，如果需要兼容IE8，就不能用vue，转而考虑可以兼容IE8的react技术栈或兼容性更好的jQuery。
  另一种方法是建议在xp系统下安装另外两个主流浏览器firefox以及chrome，在xp系统下可以安装到chrome v49、firefox v52，更重要的是这两个现代浏览器很早就与标准对接，在它们早期的版本chrome v4、firefox v2就对大部分的css3属性以及所有ES5标准进行支持，在chrome v20、firefox v20几乎对所有的css3属性进行了支持，vue在这些浏览器上可以完美的运行。
  鉴于以上分析，我建议该项目放弃对IE8及以下浏览器的支持，推荐安装firefox以及chrome这两个浏览器，如果需要支持IE9，需要做好UI框架部分Vue组件无法使用的准备。如果总部要求必须支持IE8浏览器或更低的浏览器版本，建议使用jQuery，详细分析，可以看我另一篇关于 《主流前端框架对IE浏览器支持度调查》

主流浏览器CSS 3和HTML 5兼容清单

主流浏览器CSS 3和HTML 5兼容清单

尽管CSS 3和HTML 5的W3C规范都尚未成形，但目前支持CSS 3和HTML 5的浏览器越来越多，包括google的Chrome，以及最新版本的IE 9。

需要指出的是，即使同一个浏览器的同一个版本，在Mac和Windows两个平台，它们对CSS 3和HTML 5的支持也并不一致。本文是一份Chrome，Safari，Firefox，Opera，IE这5大浏览器，在Mac和Windows两个平台，对CSS 3和HTML 5各种功能的详细支持情况清单。

CSS 3属性

可以看出，全盘支持CSS 3属性的浏览器有Chrome和Safari，而且不管是Mac平台还是Windows平台全支持。

CSS 3选择器

除了IE家族和Firefox 3，其它几乎全部支持。Chrome，Safari，Firefox 3.6，Opera 10.5成绩最好。

HTML 5 Web应用

Safari对HTML 5 Web应用的支持最好，除了地理定位功能，其它都支持。

HTML 5网页内嵌对象

这应该是HTML 5最令人期待的东西，内置的画布，视频，音频等对象。全部支持的有Chrome，Safari，Firefox 3.6，Opera 10.5。IE家族则全军覆没。

HTML 5音频编码

Opera 10.5支持的最全面，IE家族又是颗粒无收。

HTML 5视频编码

H.264任重道远。

HTML 5各种表单对象

Mac平台下的Chrome成绩最佳。这些表单对象让人想起了桌面程序。

HTML 5表单对象属性与行为

又一次想到了桌面程序。

结论

目前，对CSS 3和HTML 5支持最好的是Safari，Chrome次之，Firefox 3.6和Opera 10.5旗鼓相当，IE家族最差。鉴于这种情况，假如你想使用这两项新技术创建一个先锋体验式站点，现在的CSS 3和HTML 5可以让你实现，假如你希望这个站点能被绝大多数人正常访问，现在还为时过早，折中的方案是，为不支持CSS 3和HTML 5某些功能的浏览器提供降级方案，当然，其中要涉及到很多问题，包括浏览器，版本，平台的探测，CSSHack等等大量工作，相信是得不偿失的。