使用现代JS和CSS框架时，如何处理浏览器兼容性

Question

我正在使用Angular(版本5(和Bootstrap(4(的最新版本进行项目。

经过几周的发展，一些功能开始在Safari上张开。而且我什至不确定所有功能是否仍按预期工作。

作为现代前端开发人员，使用了最新的JavaScript和CSS框架，这些框架显然不支持旧浏览器。

Bootstrap支持所有主要浏览器和平台的最新稳定版本。在Windows上，我们支持Internet Explorer 10-11/Microsoft Edge。

我应该关心浏览器兼容性吗？

，如果我必须关心，我该怎么办来解决这些错误？

我正在寻找建议做出更好决定的建议。

Answer 1

至于Internet Explorer，您可以使用polyfiles。只需转到您的src文件夹的polyfills.ts即可。

/** IE9, IE10 and IE11 requires all of the following polyfills. **/
// import 'core-js/es6/symbol';
// import 'core-js/es6/object';
// import 'core-js/es6/function';
// import 'core-js/es6/parse-int';
// import 'core-js/es6/parse-float';
// import 'core-js/es6/number';

对于CSS差异，我使用SCSS推荐，并为所有浏览器添加竞争风格。

Answer 2

这确实取决于您的受众/项目。您关心使用IE6 的人吗？您是否在乎您的网站是否不是100％相同的，具体取决于平台？

在现场，人们通常会说，您的网站在所有桌面浏览器中都相同，并且您应该先开发移动设备。

但是，我真的很喜欢关于CSS网格的讨论，兰德·亨德里克森(Rand-Hendriksen(说我们不在乎该网站是否有所不同。在谈论CSS网格(CSS现代布局系统(时，他说，如果浏览器不支持它，他只是退回移动布局。

您是否应该担心浏览器兼容性？是的，要灭绝，但是您不必滥用它。React/Angular不会打破兼容性，但是您在其中写的HTML/CSS/JS可能会。

Answer 3

是的，你做到了。即使在现代浏览器之间也存在细微差别。在Safari，Firefox和Edge vs Chrome

上查看flexbox的不同行为

但是很容易。使用像SASS这样的CSS编译器，几乎可以照顾浏览器之间的所有可能不一致。

Answer 4

浏览器兼容性完全取决于您正在开发的内容。重要的是要考虑一下您的用户是谁。Internet Explorer 11通常是最早的Microsoft浏览器。

就野生动物园的问题而言，如果您澄清您的特定问题，以便解决这些问题可能会有所帮助。

如果IE6 确实是一个问题，则

polyfills也是一个很好的解决方案。请参阅Udi的Anwser。