更新时间:2016/07/22:评论者发现了一些数据错误(感谢!),现已更正。
数百万个网站在一种或多种主流浏览器上存在兼容性问题,导致糟糕的用户体验。网页开发者社区可以解决这个问题。
在过去的 20 年里,网页发生了巨大变化。1996 年,大约有 一百万个网站;现在有 超过十亿个网站。当时大约有 5000 万互联网用户;现在有 超过 30 亿。我们拥有比我们想象的还要多的内容。人们正在 81 亿台联网设备 上享受它,包括 超过 24000 种不同的移动设备类型。
内容、设备和用户的爆炸式增长使得跨浏览器兼容性比 1996 年更为重要。Stack Overflow 有 近 55000 个包含字符串“cross-browser”的问题,以及数十万个关于在 [浏览器 X] 中运行良好但其他浏览器却有问题的问题。任何关于特定浏览器如何处理特定网站的问题都是潜在的兼容性问题。
所以,是的,跨浏览器兼容性仍然是一个问题。我们 Mozilla 很关心这个问题,我们认为你也应该关心这个问题。为什么?嗯,你的用户可能不像你一样使用相同的浏览器。他们有 不同的能力和需求。他们 如果你的网站对他们来说无法访问,他们不会更换浏览器。好好服务他们就是 展示你精通技艺的一种方式。而且 现代工具 使得这比以往任何时候都更容易。
是什么导致跨浏览器不兼容?这很复杂。以下是当今的主要罪魁祸首
- 开发者使用特定于浏览器的功能(例如供应商特定前缀)来实现某些效果,而没有为其他浏览器提供回退或 polyfill。
- 浏览器供应商急于实施开发者想要的功能,而没有等待标准化。
- 浏览器供应商在实施标准和修复浏览器中的错误方面进展缓慢。
- 网站使用用户代理嗅探来为不同的浏览器提供不同的内容。
- 开发者过度依赖单一工具集(有时仅可靠地支持单一浏览器),可能会错过跨浏览器兼容性错误。
- 行业发展 - 强烈的需求促使许多新的网页开发者加入该领域,这意味着 总的来说,开发人员的经验比几年前要少。
其中一些挑战自网页发展的早期就一直存在。但从那时起,网页开发取得了巨大进步。最佳实践和现代工具可以帮助我们在每个浏览器上构建生动的体验。
所以,开发者们,这里有一些事情可以激励你让你的下一个网站为所有人服务。
使用其他浏览器的人比你想象的要多
许多开发者认为他们使用的浏览器是唯一一个真正被使用的浏览器,因此他们应该只为它开发。根据某些指标,70% 的网页开发者在桌面端使用 Chrome。但仅约 50% 的跨所有设备类型的网页流量来自 Chrome,仅约 62% 的桌面端网页流量来自 Chrome。仅仅在 Chrome 上构建和测试会忽略 几乎一半的全球用户。(值得注意的是,不同的浏览器份额跟踪器使用不同的方法并生成不同的数字,而且这些数字变化很快且频繁。)
而且浏览器使用情况因地理位置而异。Chrome、Firefox 和 IE/Edge 是许多地区的顶级浏览器,但每个浏览器的用户比例各不相同。德国用户更喜欢 Firefox 而不是 Chrome。IE 在日本很受欢迎。相当多的澳大利亚人选择 Safari。超过五分之一的越南用户运行 Chromium 的一个分支,称为 Cốc Cốc。仅仅在一个浏览器上构建和测试会忽略这些市场差异。
最后,你的浏览器中存在的功能可能在其他浏览器中不存在。浏览器供应商在不同的时间表上实施功能,因此,你喜欢的浏览器中的一个很酷的新 API 可能会对很多用户不可用。
这些因素以意想不到的方式结合在一起:选择在所有浏览器中都不支持的 API、仅在一个浏览器中测试你的网站,并在该浏览器不占主导地位的市场中发布,可能意味着排除超过一半的潜在受众。错失良机。让客户失望。这值得你付出额外的努力来避免。
兼容性与可访问性息息相关
构建跨浏览器兼容的网站意味着为未知的客户端环境设计和编码,以便使内容能够供尽可能广泛的受众使用。而这个受众无疑包括残疾人 - 可能比你想象的要多。如果你的网站在所有浏览器中都能运行,但在屏幕阅读器中无法正常使用,那么你错失了一个巨大的机会。
残疾人占有相当大的市场份额。例如,仅在美国,视力障碍的互联网用户数量超过了所有加拿大互联网用户数量的总和。现代网页功能满足了这个受众的需求;你只需要实现它们。
可访问性技术不仅有利于残疾人,还包括 - 例如
- 对屏幕阅读器更易访问的网页也更容易被搜索引擎算法访问。简单的可访问性技术,如在图像上使用 alt 文本、在链接中使用描述性文本、仅使用 CSS 进行样式设置(不使用它来表示含义)以及使用 HTML5 的语义标签,可以提高网页的整体 SEO。
-
视频内容的文字转录不仅对有听力障碍的人有用 - 它也对在低带宽区域无法下载视频的移动设备用户和在嘈杂环境中无法听到视频的人有用。更多的文字内容意味着更多的相关关键字,因此再次提高了 SEO。
用户不会切换浏览器,他们会切换网站
你可能会认为用户会切换浏览器来访问你的网站。但许多人不会或不能。
用户对无法正常工作的东西没有耐心,他们会直接访问竞争对手的网站。在关键时刻的失败可能会永远地让潜在用户失望。据 Akamai 称,
- 32% 在你的网站上遇到问题的用户不太可能在你公司进行在线交易
- 35% 会对你公司产生更负面的看法
- 45% 不太可能再次访问你的网站
- 超过五分之一的用户(22%)将永远离开。
更重要的是,许多用户不知道如何安装新的浏览器,甚至不知道什么是浏览器(许多用户不知道浏览器、搜索引擎和网站之间的区别)。
即使用户知道如何安装新的浏览器,并且想要安装,他们也可能无法安装。许多公司规定员工可以使用哪些浏览器,而且许多人在图书馆等公共场所使用公共电脑。
例如,微软为用户切换到更新版本的浏览器设定了 2016 年 1 月 12 日的最后期限,但在 2016 年 3 月,超过三分之一的 IE 用户仍然使用过时的版本,这些版本不再接收安全更新。在 过去一年(2015 年 6 月 - 2016 年 5 月)中,2.07% 的用户运行的是 IE8,这款浏览器微软不再提供补丁;IE9 的情况也是如此,超过四分之三的 1.59% 用户在使用它,而使用 IE10 的 10.95% 用户几乎全部如此(尽管需要注意的是,自 3 月份以来,这些浏览器的使用率已大幅下降)。
糟糕的网页体验会让用户离开。如果一半的用户使用的是不同的浏览器,并且你想要留住他们,那么在该浏览器中测试是必不可少的。
兼容性 === 手艺
为网页创作是一项娴熟的学科,不仅仅是一项机械的任务 - 我们都希望为自己的工作感到自豪,磨练自己的手艺,并展示我们对它的精通。这包括
- 了解最新的技术、框架和技巧。
- 仔细测试并实施跨浏览器/平台应用程序,包括对功能较弱的浏览器的回退。体验是否可以接受?
- 确保你的网页内容对残疾人可访问。
- 确保你/你的客户的创作的一般外观和用户体验令人愉悦,并符合你的品牌。
因此,作为一名网页开发者,上线的网站就是你的简历。高质量的用户体验对你的用户、同行以及现在和未来的雇主都至关重要。
但很多时候,时间和业务限制会阻碍这些事情的实现。你必须赶在最后期限之前完成任务。你的老板只关心网站在他 iPad 上的运行情况,没有听说过可访问性。你没有时间在这个冲刺中修复 IE 里的 bug。我们大部分时间只能做我们能做的,而不是我们理想中想做的。
当最后期限迫近时,你可能会想要放弃跨浏览器测试,希望你选择的框架测试能够覆盖所有情况。但是你的网站不仅仅是框架代码,你对所有代码负责。测试以确保你的代码在所有浏览器中都能正常运行,是一个你应该坚决拒绝放弃的环节。
编写经久不衰的代码;向所有请求信息的人提供信息;创建适用于所有人的丰富功能:这些都是优秀网页开发者追求的目标。
现代工具可以提供帮助
现在你知道了一些让你的网站更兼容的理由。但是你该怎么做呢?
- 如果你在 *别人的网站* 上发现了 bug,请在 webcompat.com 上提交!如果你正在调试自己的网站,请继续阅读。
- 在不同的浏览器中尝试你的网站,并像用户一样浏览它。在浏览器的开发者工具中观察开发者控制台是否有错误(大多数现代桌面浏览器都内置了功能强大的开发者工具,可以帮助你调试问题,即使是在移动设备上)
- 如果你发现了一个不在你的网站上的 bug,也许是浏览器本身的 bug!提交一个 bug 报告,让浏览器的开发人员修复它。
- 将流行的跨浏览器测试工具集成到你的部署流程中,使跨浏览器测试自动化。
- 了解哪些浏览器实现了 web 功能,然后再在你的网站上使用它们。
- 探索可以提高跨浏览器兼容性的编码工具
- 深入了解。学习 web 的各种功能和特性。你对它的了解越多,你就会越爱它。
实现 web 的承诺
web 的承诺是,任何人都可以使用任何浏览器在任何设备上访问内容。在这个承诺中交织着人类一些最伟大的愿望——自主、自由、教育和发现。为跨浏览器兼容性设计可以将你的作品开放给尽可能多的受众和市场,提升你在这门手艺上的造诣,本身也是一个崇高的目标。
虽然现代设备和浏览器环境带来了许多挑战,但现代工具也提供了许多解决方案。超过 30 亿人在寻找你的网站——它准备好了吗?
关于 Justin Crawford
Justin Crawford 是 Mozilla 的产品工程师,负责开发者营销和增长。他喜欢思考未来,构建事物和骑自行车。
关于 Chris Mills
Chris Mills 是 Mozilla 的高级技术作家,他撰写有关开放 web 应用程序、HTML/CSS/JavaScript、A11y、WebAssembly 等等的文档和演示。他喜欢摆弄 web 技术,并偶尔在会议和大学里做技术演讲。他以前曾在 Opera 和 W3C 工作,喜欢演奏重金属鼓和喝好啤酒。他和他的好妻子以及三个漂亮的孩子住在英国曼彻斯特附近。
关于 Ali Spivak
@alispivak。Ali 是 Mozilla 开发者生态系统的负责人,她开发和管理网站的时间比她愿意承认的要长。她热衷于保持 web 的开放性,并致力于开发者喜欢的事情(比如 MDN)。
37 条评论