浏览器溢出...如何确保跨浏览器,跨平台测试和兼容性

Question

我的团队正在开发一个新网站,该网站应该是跨浏览器兼容(IE 8 +,Chrome,Safari,Firefox,Opera)和跨平台兼容(桌面,平板电脑,智能手机).

我们一直在研究实现这一目标的许多新方法,例如HTML 5,响应式设计,使用JS库,从用户那里抽象出很多浏览器的混乱,但是从浏览器甚至是MVVM,但是一个主要的我一直面临的问题是浏览器的变化速度有多快.由于Chrome和Firefox都使用持续交付模式,因此测试变得越来越难.从它的外观来看,其他网站也存在同样的问题(这些天似乎是关于某个网站是否可以在特定浏览器中运行)

• 您或您的团队在测试新浏览器时会有什么建议？
• 在开发过程中你做了什么,以减少浏览器更新出来时代码中断的可能性？
• 您如何决定何时或将放弃对浏览器版本的支持？

Answer 1

注意:我已经改变了你的问题的顺序,以便在最后留下更长的答案.

你的问题

您或您的团队在测试新浏览器时会有什么建议？

实际上,正如你所说,Chrome和Firefox正在不断提供,因此它可以简化这一过程.您拥有的最新版本通常始终是用户拥有的版本.

对于任何其他浏览器(以及Chrome和Firefox旧版本),只需选择每个浏览器的版本并充当"高通过滤器",从您选择的版本开始测试任何版本.

您如何决定何时或将放弃对浏览器版本的支持？

看一下浏览器使用的统计数据.有许多资源,如statcounter,w3counter,w3cschools或wikimedia.如果可能,请在网页中添加分析跟踪器,您将获得有关访问者访问网站所使用的设备,平台,浏览器和版本的数据.

在开发过程中你做了什么,以减少浏览器更新出来时代码中断的可能性？

关键是要根据现有标准使用定义明确的方法.继续阅读以获得个人推荐.

工作流程可以简化交叉浏览

第1步:引导

首先决定:优雅降级与渐进增强.两者都是有效的技术,但使用第一个修复现有项目和第二个用于新创建的项目是有意义的.

然后选择库以避免键入现有代码,重点关注3种语言:JavaScript,CSS和HTML.HTML5(+ CSS3)是今天更好的选择,但必须提供对旧版浏览器的支持.以下库可以轻松支持它们:

• modernizr用于特征检测和js或css的条件加载.
• jQuery for ajax和dom相关的任务.
• normalize.css用于规范化默认浏览器样式,而不仅仅是"重置"它们.

请注意,上面列出的所有js库都允许自定义构建,这在性能很重要时很重要.

Html5 Boilerplate提供了一个强大的模板,从中开始布局.它包括modernizr,jQuery和normalize.css.它的github存储库是一个很好的资源,可以学习很多关于跨浏览技术的知识.这篇关于wiki的文章有一套很好的开始学习的链接.

第2步:做好工作

设计应该是移动优先和响应.这篇关于html5rocks的文章介绍了为什么以及如何.

在"做这项工作"的同时:

• 遵循w3c标准.尽可能避免使用黑客攻击,特别是CSS黑客攻击.经常回顾HTML5规范,因为它非常不稳定.

• 编写javascript时要注意ECMAScript 5的功能.依靠库来避免因浏览器实现不足而导致的代码中断.不要扩展DOM.

• 尽可能自动化测试.布局和特殊布局抛光(包括动画)都是手动测试的,因为它更快,但是像表格子画面这样的UI功能可以通过自动测试进行完美测试.

• 使用工具来简化任务.Chrome + devtools或Firefox + firebug是最基本的必备用途,但有许多工具可以简化交叉浏览测试,甚至可以自动化这些测试.

附件:工具和资源

跨浏览器测试

• Browserstack真棒.允许在所有设备,平台,浏览器和版本上进行测试.

• Browserling是 browserstack的替代品.它由Peteris Krumins和James Halliday开发和维护,他们都是 node.js社区和知名开发人员的公认成员.他们还发布了一个名为 testling-ci的自动化过程工具,但这只有在后端使用node.js时才有意义.

• modern.ie提供了便于在Internet Explorer上测试的工具.该站点由Microsoft开发,通过预先安装的软件通过browserstack和可下载的虚拟机映像提供实时测试.

"响应式设计"的适应性测试

• respon.si是一个在线工具,用于测试布局的视觉外观.它允许选择分辨率,因此它对响应式布局测试很有用.请注意,选择分辨率的任何其他工具都可以轻松地执行相同操作.