5

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

我们一直在研究实现这一目标的许多新方法，例如 HTML 5、响应式设计、使用 JS 库，这些库将很多浏览器的混乱从用户手中抽象出来，但由于浏览器甚至 MVVM，但其中一个主要的我一直面临的问题是浏览器的变化速度有多快。Chrome 和 Firefox 都使用持续交付模型，测试变得越来越难。而且从外观上看，其他网站也有同样的问题（这些天，关于一个网站是否可以在特定的浏览器中运行，似乎受到了打击或错过）

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

3 回答 3

8

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

你的问题

您或您的团队对新推出的浏览器的测试有什么建议？

实际上，正如您所说，Chrome 和 Firefox 一直在交付，因此简化了流程。您拥有的最后一个版本通常始终是用户拥有的版本。

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

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

看看浏览器使用的统计数据。有许多资源，例如statcounter、w3counter、w3cschools或wikimedia。如果可能，将分析跟踪器添加到您的页面，您将获得有关访问者用于访问网站的设备、平台、浏览器及其版本的数据。

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

关键是使用基于现有标准的明确定义的方法。继续阅读个人推荐。

简化交叉浏览的工作流程

第 1 步：自举

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

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

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

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

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

第 2 步：完成工作

设计应该是移动优先和响应式的。这篇关于 html5rocks 的文章很好地介绍了原因和方法。

在“做工作”时：

  • 遵循w3c 标准。尽可能避免使用 hack，尤其是 CSS hack。经常查看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 开发，通过浏览器堆栈和可下载的虚拟机映像以及预安装的软件提供实时测试。

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

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

您或您的团队对新推出的浏览器的测试有什么建议？

作为完成定义的一部分，我们支持以下桌面浏览器：

  • IE8+
  • 火狐 3.6
  • 火狐（最新）
  • 铬（最新）
  • 野生动物园 6

对最新版本的 Firefox/Chrome 的支持很好，因为它们都提供自动更新，所以如果有人对旧版本的浏览器有问题，我们无法控制，他们应该更新。

大多数 Firefox/Chrome 测试都可以在我们的机器上完成，但不同操作系统处理字体的方式显然存在差异，并且本机表单元素的一些怪癖可能会或可能不会延续到 Windows 上的版本。

要在 OS XI 上测试 Firefox 版本，请使用我创建的“安装所有 Firefox ”脚本，以允许我并排运行多个版本的 Firefox。

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

这些虚拟机是使用modern.ie提供的图像设置的。我们在虚拟机开启的情况下远程访问机器，这样我们就不需要中断我们的工作流程并转到另一台机器。

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

显而易见的事情是避免 CSS hack，并确保编写的 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 中按浏览器类型进行细分非常有用。当特定浏览器的使用率下降到 10% 以下时，是停止为其开发新功能的好时机。

您也可以做一些激进的事情，例如放弃该浏览器的所有黑客/样式，但为了更顺畅的过渡（并鼓励人们升级），最好停止为旧浏览器开发，并且可能有条件地显示一条消息.

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

移动设备完全是另外一锅鱼，如果您的网站完全响应，那就是额外的痛苦。

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

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

于 2013-06-14T10:07:31.240 回答
0

使用 Web 标准进行设计和开发。验证网络平台。已经列出的所有库/解决方案/等都是惊人的并且非常有用，但是如果您坚持标准，您会发现您需要这些库越来越少......至少对于优雅地降低用户代理支持。我发现我越来越多地使用它们来进行渐进增强。

于 2013-06-14T12:29:01.513 回答