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

Question

As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center提供指导。




7年前关闭。




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

我们一直在研究实现这一目标的许多新方法，例如HTML 5，响应式设计，使用JS库的JS库，该库将许多浏览器从用户身上弄得一团糟，但由于浏览器甚至是MVVM，这是一个主要问题我一直面临的问题是浏览器的变化速度如何。 Chrome和Firefox都使用持续交付模式，因此测试变得越来越困难。从外观上看，其他网站也有相同的问题(这些天来，似乎该网站是否可以在特定的浏览器中运行还是很受欢迎)

您或您的团队对测试新浏览器的发布有何建议？

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

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

最佳答案

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

你的问题

What suggestions do you or your team have for testing new browsers as they come out?

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

对于任何其他浏览器(以及Chrome和Firefox的旧版本)，只需选择每个浏览器的一个版本并充当“高通过滤器”，即可从所选的浏览器中测试任何版本。

How do you decide when you will or will drop support for a browser version?

查看浏览器使用情况的统计信息。有许多资源，例如 statcounter， w3counter， w3cschools或 wikimedia。如果可能，在页面上添加一个分析跟踪器，您将获得有关访问者用来访问该站点的设备，平台，浏览器及其版本的数据。

What things do you do during development to decrease possibility of having code break when a browser update comes out?

关键是在现有标准的基础上使用定义明确的方法。继续阅读以获取个人推荐。

简化跨浏览的工作流程

步骤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是浏览器堆栈的替代方法。 Peteris Krumins和James Halliday都将其称为developed and maintained，他们都是the node.js community的知名成员和知名开发人员。他们还发布了一个自动化过程testling-ci的工具，但这仅在后端使用node.js时才有意义。

modern.ie提供了可简化Internet Explorer测试的工具。该站点由Microsoft开发，可通过浏览器堆栈和可预先安装的软件下载的虚拟机镜像进行实时测试。

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

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

关于html - 浏览器溢出...如何确保跨浏览器，跨平台测试和兼容性，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17105526/

上一篇：html - 如何将自定义 HTML 代码放在 wordpress 网站的标题中

下一篇：html - 将一个div变成透明的以透视两个容器

相关文章：

javascript - 通过Ajax调用JSP自定义标签tld

jquery - jQuery UI 布局和 jQuery UI 选项卡的问题

php - CSS:将字体设置为一定大小，以便文本占据整个容器

python - 为什么 xframe_options_exempt 不适用于我的 Django View ？

apache - 无法使用网站 url 访问网站 ( localhost : port works )

javascript - 将网站重定向到 HTTPS 并进行有限重试？

html - 容器填充图像纵横比

javascript - 如何缩放元素而忽略所有内容？

javascript - 在我的样式之后实现 css 加载

html - CSS3 parent 的可见性 : hover transition hides child's visibility:visible transition after a delay

Answer 1

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

你的问题

What suggestions do you or your team have for testing new browsers as they come out?

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

对于任何其他浏览器(以及Chrome和Firefox的旧版本)，只需选择每个浏览器的一个版本并充当“高通过滤器”，即可从所选的浏览器中测试任何版本。

How do you decide when you will or will drop support for a browser version?

查看浏览器使用情况的统计信息。有许多资源，例如 statcounter， w3counter， w3cschools或 wikimedia。如果可能，在页面上添加一个分析跟踪器，您将获得有关访问者用来访问该站点的设备，平台，浏览器及其版本的数据。

What things do you do during development to decrease possibility of having code break when a browser update comes out?

关键是在现有标准的基础上使用定义明确的方法。继续阅读以获取个人推荐。

简化跨浏览的工作流程

步骤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是浏览器堆栈的替代方法。 Peteris Krumins和James Halliday都将其称为developed and maintained，他们都是the node.js community的知名成员和知名开发人员。他们还发布了一个自动化过程testling-ci的工具，但这仅在后端使用node.js时才有意义。

modern.ie提供了可简化Internet Explorer测试的工具。该站点由Microsoft开发，可通过浏览器堆栈和可预先安装的软件下载的虚拟机镜像进行实时测试。

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

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