跳到主要内容

避免跨浏览器兼容性问题的10种方法

10 ways to avoid cross-browser compatibility issues

跨浏览器测试的前景不太可能让任何人满心欢喜,但这是任何网络构建的最后一步,你不能错。

你可能正在打包最新的响应式网页设计视差滚动技巧,但你的测试中的一个小漏洞可能会看到一大堆潜在用户被锁定在你的时髦新站点之外。因此,为了帮助您并确保您做到正确,以下是您需要做的十件事情,以确保您的网站能够正常运行,但是人们正在关注它。

01.验证您的代码

如果您的代码不是严格有效,则您更有可能在浏览器之间遇到奇怪的行为,因此请使用W3C标记验证服务确保它符合标准。

02.优雅地失败

设计您的网站的前提是并非所有功能都能正常运行。在没有启用JavaScript或样式化的情况下检查它的呈现方式通常是健康的,看看用户是否至少可以根据内容来判断发生了什么。

03.了解你的观众

确保您了解所定位的浏览器和设备。您的网页主要面向移动用户吗?您是否在仍在使用旧版浏览器的公司内工作?相应地测试。

04.考虑使用框架

如果你使用一个完善的框架,无论是否造型(例如引导)或JavaScript框架(如要么应对),通常这意味着其他人已经为您处理了许多跨浏览器兼容性工作。

05.保持设计简单

Illustration of a computer and a phone with 'www...' displayed on screens

网页设计并不总是需要全能,全是舞蹈

这看起来很明显,但是您尝试使用的前沿CSS功能越少,您支持所有浏览器的难度就越小。考虑你是否真的需要它们。

06.重复使用和减少组件

这可以从明智地管理CSS类的基础知识开始,到使用Web组件来模块化整个站点。从本质上讲,您必须测试和维护类似更改的位置越少,管理起来就越容易。

07.首先用困难的浏览器进行测试

如果您知道需要支持Internet Explorer 6,请从此开始。在发现第一个问题之前,您不希望获得90%的测试。

08.创建测试脚本

无论您是否自动化,即使对于简单的站点,您也应该定义您希望在每个浏览器中运行的测试集。否则,你最终会在运行之间丢失一些东西。

09.随身携带进行测试

特别重要的是,如果您正在做一些可能很棘手的事情,请不要等到您完成开发以开始测试。采用迭代方法尽早发现问题。

10.检查您的功能

在使用之前,请在线检查浏览器对新功能的支持,如果您绝对必须依赖不全面支持的功能,请使用功能检测和polyfill。

本文最初发表于创意网页设计杂志Web Designer。在此订阅Web Designer

相关文章:



翻译字数超限