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

你的问题

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是browserstack的替代品.这是developed and maintained年由Peteris Krumins和James Halliday,他们都是the node.js community的知名成员和知名开发人员.他们还发布了一个自动化过程的工具,名为testling-ci,但这仅在后端使用node.js时才有意义.
> modern.ie提供了便于在Internet Explorer上进行测试的工具.该站点由Microsoft开发,通过预先安装的软件通过browserstack和可下载的虚拟机映像提供实时测试.

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

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