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

Question

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

我们一直在寻找实现这一目标的许多新方法，例如HTML 5，响应式设计，使用JS库，从用户那里抽象出很多浏览器，但是自浏览器甚至MVVM以来，我遇到的一个主要问题是浏览器的变化速度有多快。由于Chrome和Firefox都使用持续交付模式，因此测试变得越来越难。从它的外观来看，其他网站也有同样的问题（现在看来它是关于某个网站是否可以在特定浏览器中运行的命中或错过）

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

Answer 1

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

您的问题

  

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

实际上，正如您所说，Chrome和Firefox不断提供，因此可以简化流程。您拥有的最新版本通常始终是用户拥有的版本。

对于任何其他浏览器（以及Chrome和Firefox旧版本），只需选择每个浏览器的版本并充当“高通过滤器”，从您选择的版本开始测试任何版本。

  

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

查看浏览器使用的统计信息。有许多资源，例如statcounter，w3counter，w3cschools或wikimedia。如果可能，请向您的网页添加分析跟踪器，您将获得有关访问者访问网站所使用的设备，平台，浏览器和版本的数据。

  

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

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

便于交叉浏览的工作流程

第1步：引导

首先决定：Graceful degredation versus progressive enhancement。两者都是有效的技术，但使用第一个来修复现有项目是有意义的，第二个是新创建的项目。

然后选择库avoid typing existing code，重点关注3种语言：JavaScript，CSS和HTML。 HTML5（+ CSS3）是今天更好的选择，但必须提供对旧版浏览器的支持。以下图书馆可以轻松支持它们：

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

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

Html5 Boilerplate提供了一个强大的模板，从中开始布局。它包括modernizr，jQuery和normalize.css。 Its github repository是学习很多交叉浏览技术的好资源。 This article on its wiki有一套很好的链接可以开始学习。

第2步：完成工作

设计应该是移动优先和响应。 This article on html5rocks介绍了为什么以及如何做好。

在“做这项工作”时：

• 关注the w3c standards。尽可能避免使用黑客攻击，特别是CSS黑客攻击。经常查看HTML5 specification，因为它非常不稳定。

• 编写javascript时，请注意ECMAScript 5功能。依靠库来避免因浏览器实现不足而导致的代码中断。 Do not extend the DOM

如果可能的话，

• Automate tests。布局和特殊布局抛光（包括动画）manually tested导致它更快，但是像表格子模式这样的UI功能可以通过自动化测试进行完美测试。

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

附件：工具和资源

跨浏览器测试

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

• Browserling是browserstack的替代品。由developed and maintained和着名开发人员认可的成员Peteris Krumins和James Halliday the node.js community。他们还发布了一个工具来自动化名为testling-ci的过程，但这仅在后端使用node.js时才有意义。

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

“响应式设计”的适应性测试

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

Answer 2

  

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

作为definition of done的一部分，我们支持以下桌面浏览器：

• IE8 +
• Firefox 3.6
• Firefox（最新）
• Chrome（最新）
• Safari 6

最新版本的Firefox / Chrome的支持很好，因为它们都提供自动更新，因此如果有任何人在旧版本的浏览器上出现问题，它就不在我们手中，他们应该更新。

大多数Firefox / Chrome测试都可以在我们的计算机上完成，但是不同操作系统处理字体的方式明显存在差异，而且本地表单元素的某些怪癖可能会或可能不会转移到Windows上的版本。

要在OS X上测试Firefox版本，我使用我创建的“Install all Firefoxes”脚本，以允许我并排运行多个版本的Firefox。

我们的开发团队使用Ubuntu和Mac OS作为他们的环境，因此我们有一台专用机器，每个版本的IE都有虚拟机，Windows上有Chrome / Firefox，OS X上有Safari 6。

使用modern.ie提供的图像设置这些虚拟机。我们使用虚拟机远程访问计算机，这样我们就不需要破坏我们的工作流程并转到另一台计算机。

  

您在开发过程中做了哪些事情以减少浏览器更新时代码中断的可能性？

显而易见的事情是避免CSS黑客攻击，并确保编写的HTML / CSS / JavaScript符合我们的代码标准，以及我们对已完成的定义。

如果我们使用的是实验性CSS功能，我们会确保提供供应商前缀和最后w3属性定义：

-moz-foo: bar;
-ms-foo: bar;
-o-foo: bar;
-webkit-foo: bar;
foo: bar;

显然这引入了一些技术上的债务，但是如果你为CSS使用预处理器，可以减少开销。

我们为IE保留一个单独的样式表并使用条件注释加载它，这样我们就可以修复IE中的问题，而不会影响其他浏览器的其他前端的完整性。最近有一个动作将其移到shame.css，你可以在这里阅读：http://csswizardry.com/2013/04/shame-css/

  

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

Google Analytics。按Google Analytics中的浏览器类型细分非常有用。当特定浏览器的使用率降至10％以下时，现在是停止为其开发新功能的好时机。

你可以做一些激进的事情，就像扔掉你浏览器的所有黑客/风格一样，但是为了更平滑的过渡（并鼓励人们升级），最好简单地停止为旧浏览器开发，也许有条件地显示消息。

我们最近放弃了对IE7的支持，现在使用IE7的访问者会收到一条消息告诉他们升级，他们不会再获得任何修复或附加功能。

手机是另一个鱼的水壶，如果你的网站完全响应，这是一层额外的痛苦。

我们有一堆不同尺寸/版本的Android设备，一些旧的iPhone和一台iPad，我们用它来测试移动浏览器的大部分。

显然，屏幕尺寸，DPI，浏览器版本等存在差异。在这方面，您可以做的最好的事情是迎合最常见的情况，并解决任何问题。

Answer 3

使用Web标准进行设计和开发。验证Web平台。已经列出的所有libs / solutions / etc都非常有用，但是如果你坚持使用标准，你会发现你需要越来越少的lib ...至少是为了优雅地降低用户代理支持。我发现我越来越多地使用它们进行渐进增强。