让网页为所有人服务

更新时间:2016/07/22:评论者发现了一些数据错误(感谢!),现已更正。

数百万个网站在一种或多种主流浏览器上存在兼容性问题,导致糟糕的用户体验。网页开发者社区可以解决这个问题。

在过去的 20 年里,网页发生了巨大变化。1996 年,大约有 一百万个网站;现在有 超过十亿个网站。当时大约有 5000 万互联网用户;现在有 超过 30 亿。我们拥有比我们想象的还要多的内容。人们正在 81 亿台联网设备 上享受它,包括 超过 24000 种不同的移动设备类型

Statistics illustrating explosive growth in the number of sites, users, and devices.

内容、设备和用户的爆炸式增长使得跨浏览器兼容性比 1996 年更为重要。Stack Overflow 有 近 55000 个包含字符串“cross-browser”的问题,以及数十万个关于在 [浏览器 X] 中运行良好但其他浏览器却有问题的问题。任何关于特定浏览器如何处理特定网站的问题都是潜在的兼容性问题。

Statistics showing the number of questions on Stack Overflow that relate to cross-browser compatibility.

所以,是的,跨浏览器兼容性仍然是一个问题。我们 Mozilla 很关心这个问题,我们认为你也应该关心这个问题。为什么?嗯,你的用户可能不像你一样使用相同的浏览器。他们有 不同的能力和需求。他们 如果你的网站对他们来说无法访问,他们不会更换浏览器。好好服务他们就是 展示你精通技艺的一种方式。而且 现代工具 使得这比以往任何时候都更容易。

是什么导致跨浏览器不兼容?这很复杂。以下是当今的主要罪魁祸首

  • 开发者使用特定于浏览器的功能(例如供应商特定前缀)来实现某些效果,而没有为其他浏览器提供回退或 polyfill。
  • 浏览器供应商急于实施开发者想要的功能,而没有等待标准化。
  • 浏览器供应商在实施标准和修复浏览器中的错误方面进展缓慢。
  • 网站使用用户代理嗅探来为不同的浏览器提供不同的内容。
  • 开发者过度依赖单一工具集(有时仅可靠地支持单一浏览器),可能会错过跨浏览器兼容性错误。
  • 行业发展 - 强烈的需求促使许多新的网页开发者加入该领域,这意味着 总的来说,开发人员的经验比几年前要少

Statistics suggesting that browser implementations, developer experience, and developer browser choice may affect cross-browser compatibility.

其中一些挑战自网页发展的早期就一直存在。但从那时起,网页开发取得了巨大进步。最佳实践和现代工具可以帮助我们在每个浏览器上构建生动的体验。

所以,开发者们,这里有一些事情可以激励你让你的下一个网站为所有人服务。

使用其他浏览器的人比你想象的要多

许多开发者认为他们使用的浏览器是唯一一个真正被使用的浏览器,因此他们应该只为它开发。根据某些指标,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 月份以来,这些浏览器的使用率已大幅下降)。

糟糕的网页体验会让用户离开。如果一半的用户使用的是不同的浏览器,并且你想要留住他们,那么在该浏览器中测试是必不可少的。

Statistics showing that browser use varies by locale, and that broken web sites drive away users.

兼容性 === 手艺

为网页创作是一项娴熟的学科,不仅仅是一项机械的任务 - 我们都希望为自己的工作感到自豪,磨练自己的手艺,并展示我们对它的精通。这包括

  • 了解最新的技术、框架和技巧。
  • 仔细测试并实施跨浏览器/平台应用程序,包括对功能较弱的浏览器的回退。体验是否可以接受?
  • 确保你的网页内容对残疾人可访问。
  • 确保你/你的客户的创作的一般外观和用户体验令人愉悦,并符合你的品牌。

因此,作为一名网页开发者,上线的网站就是你的简历。高质量的用户体验对你的用户、同行以及现在和未来的雇主都至关重要。

但很多时候,时间和业务限制会阻碍这些事情的实现。你必须赶在最后期限之前完成任务。你的老板只关心网站在他 iPad 上的运行情况,没有听说过可访问性。你没有时间在这个冲刺中修复 IE 里的 bug。我们大部分时间只能做我们能做的,而不是我们理想中想做的。

当最后期限迫近时,你可能会想要放弃跨浏览器测试,希望你选择的框架测试能够覆盖所有情况。但是你的网站不仅仅是框架代码,你对所有代码负责。测试以确保你的代码在所有浏览器中都能正常运行,是一个你应该坚决拒绝放弃的环节。

编写经久不衰的代码;向所有请求信息的人提供信息;创建适用于所有人的丰富功能:这些都是优秀网页开发者追求的目标。

现代工具可以提供帮助

现在你知道了一些让你的网站更兼容的理由。但是你该怎么做呢?

实现 web 的承诺

web 的承诺是,任何人都可以使用任何浏览器在任何设备上访问内容。在这个承诺中交织着人类一些最伟大的愿望——自主、自由、教育和发现。为跨浏览器兼容性设计可以将你的作品开放给尽可能多的受众和市场,提升你在这门手艺上的造诣,本身也是一个崇高的目标。

虽然现代设备和浏览器环境带来了许多挑战,但现代工具也提供了许多解决方案。超过 30 亿人在寻找你的网站——它准备好了吗?

关于 Justin Crawford

Justin Crawford 是 Mozilla 的产品工程师,负责开发者营销和增长。他喜欢思考未来,构建事物和骑自行车。

更多 Justin Crawford 的文章…

关于 Chris Mills

Chris Mills 是 Mozilla 的高级技术作家,他撰写有关开放 web 应用程序、HTML/CSS/JavaScript、A11y、WebAssembly 等等的文档和演示。他喜欢摆弄 web 技术,并偶尔在会议和大学里做技术演讲。他以前曾在 Opera 和 W3C 工作,喜欢演奏重金属鼓和喝好啤酒。他和他的好妻子以及三个漂亮的孩子住在英国曼彻斯特附近。

更多 Chris Mills 的文章…

关于 Ali Spivak

@alispivak。Ali 是 Mozilla 开发者生态系统的负责人,她开发和管理网站的时间比她愿意承认的要长。她热衷于保持 web 的开放性,并致力于开发者喜欢的事情(比如 MDN)。

更多 Ali Spivak 的文章…


37 条评论

  1. Ada Rose Edwards

    另一个支持跨站点兼容性的酷炫工具是 polyfill 服务:https://cdn.polyfill.io/v2/docs/

    2016 年 7 月 6 日 下午 06:48

  2. Lucas Magroski

    “但只有大约 57% 的普通用户在所有设备类型上使用 Chrome,而只有大约 45% 的普通用户在台式机上使用 Chrome。”

    这些数字是颠倒的。至少,根据你发布的链接(http://gs.statcounter.com/)是这样。

    2016 年 7 月 6 日 下午 07:39

  3. Lucas Magroski

    根据你分享的链接,这些数字是颠倒的:“但只有大约 57% 的普通用户在所有设备类型上使用 Chrome,而只有大约 45% 的普通用户在台式机上使用 Chrome。”

    2016 年 7 月 6 日 下午 07:51

    1. Chris Mills

      Stat Counter 链接显示了 2015 年 6 月至 2016 年 6 月前 5 名台式机、平板电脑和游戏机浏览器的图表。2016 年 6 月 Chrome 的数据约为 57%。所以我相信它写的是正确的。45% 的数据可能是从 http://gs.statcounter.com/#mobile_browser-ww-monthly-201506-201606 获取的。

      2016 年 7 月 6 日 上午 09:03

    2. Chris Mills

      我认为我的同事在我评论之前刚刚更改了它;我认为你最初是对的,但我们现在已经修复了它。抱歉造成困扰 ;-)

      2016 年 7 月 6 日 上午 09:08

  4. Richard Everett

    这个页面的布局在 IE11 中看起来很奇怪——文本占据了浏览器窗口左侧的狭窄区域。

    在 Chrome 中情况也好不到哪里去,文章主体没有真正居中对齐。

    这是故意的吗?

    2016 年 7 月 6 日 下午 08:10

    1. Chris Mills

      遗憾的是不是 ;-) 段落宽度似乎有一个奇怪的设置;我们正在对此进行调查。感谢你提出这个问题。

      2016 年 7 月 6 日 上午 09:23

    2. Potch

      真诚是新的讽刺。窄文本列是故意的,不是 bug——65-75 个字符被认为是可读性的良好行长。但是,我们没有将图像限制在相同的尺寸。

      2016 年 7 月 6 日 上午 10:41

    3. Potch

      关于 IE11 的问题——我们正在更新网站以修复这个问题。

      2016 年 7 月 6 日 上午 11:39

  5. Nicolas Grilly

    “运行 IE8 的 18.2% 的 IE 用户使用的是微软不再提供补丁的浏览器”:这个数字从哪里来的?

    2016 年 7 月 6 日 下午 08:32

    1. Ali Spivak

      这个数字来自 2016 年 3 月。到 6 月底,这个数字下降了很多,这可能是它看起来不正常的原因。

      2016 年 7 月 6 日 上午 10:08

    2. Nicolas Grilly

      你更新了这篇文章吗?

      我引用的部分现在被替换成了:“目前运行 IE8 的 2.07% 的用户使用的是微软不再提供补丁的浏览器”(这看起来更合理)。

      2016 年 7 月 7 日 上午 05:31

      1. Chris Mills

        是的,我们做了一些更新。

        2016 年 7 月 7 日 上午 05:39

        1. Nicolas Grilly

          好的,谢谢。我想那应该是一个拼写错误 ;-)

          2016 年 7 月 7 日 上午 05:39

  6. Ken

    很棒的统计数据和有趣的报告。但是,在跨浏览器测试部分,你列出了 Travis,这是不正确的。Travis 是一个 CI 服务器,而不是跨浏览器测试工具/服务。

    2016 年 7 月 6 日 上午 10:40

    1. Chris Mills

      我不知道它是如何溜进去的……已经删除了 ;-)

      2016 年 7 月 6 日 上午 10:47

  7. Mark

    我使用的另一个跨浏览器测试工具:https://testingbot.com
    创建一个测试,并在所有浏览器版本上运行它,以查看你的网站在旧版/新版本上是否外观和行为都正确。

    2016 年 7 月 6 日 上午 11:15

  8. bl4de

    所以,在万维网诞生近 20 年后,我们几乎回到了 90 年代末的同一起点 :)

    “要查看此网页,您需要 Internet Explorer 和 640×480 的屏幕分辨率”——或者类似的东西,还记得吗?:D

    2016 年 7 月 6 日 上午 11:51

    1. Chris Mills

      令人兴奋的变化速度,对吧? ;-)

      2016 年 7 月 7 日 上午 1:19

  9. Vincent

    第二个信息图表显示“如果开发者只针对 Chrome 开发,那么他们正在忽略至少 43% 的用户”。但根据文本,这 43% 是使用 Chrome 的人(考虑到使用的颜色,这也说得通),因此 57% 的用户将被忽略。

    2016 年 7 月 6 日 下午 12:20

  10. Vincent

    我现在看到,关于我之前的评论,文本已经更新了,与我在我的阅读器中看到的内容不同。不过,信息图表应该对 Chrome 的使用份额使用相同的颜色。

    (我的上一条评论尚未发布,这就是我为什么没有回复它……)

    2016 年 7 月 6 日 下午 12:36

  11. Web Axe

    不错的文章。建议将文本块中文本链接的下划线恢复,以便所有人(尤其是视觉障碍人士)都可以访问。

    2016 年 7 月 6 日 下午 18:23

    1. Chris Mills

      现在至少它们是有下划线的。

      2016 年 7 月 7 日 上午 1:19

  12. Jeremy

    几乎所有的统计数据都已整理完毕……

    “对于上个月使用 IE10 的 10.95% 的所有用户。”

    该链接列出了 IE11 为 10.93%,IE10 为 1.46%。但实际上是针对过去一年的。您可以使用此链接直接跳转到上个月的数字:http://gs.statcounter.com/#desktop-browser_version_partially_combined-ww-monthly-201606-201606-bar

    但结果是
    IE11 8.93%
    IE10 0.74%
    IE9 0.77%
    IE8 1.16%

    2016 年 7 月 6 日 下午 22:10

  13. Rafael

    非常好的阅读。我相信这个行业相当多样化。这里没有考虑用户目标——我们是否想要针对这些浏览器进行开发?有时我们(公司、开发者等)就是没有兴趣,我认为这没问题。像 Google Analytics 这样的工具也可以向您展示用户来自何处,以查看您是否将其正确定位。有许多仅针对 Internet Explorer 的遗留系统,这些系统永远不会改变。

    对于所有其他网站,具有较长生命周期或真正重要的网站,这些技巧很有用。

    2016 年 7 月 6 日 下午 22:52

    1. Chris Mills

      这始终是一个理想的目标——尽你所能做到——而不是绝对的目标。如果您确实心中有非常具体的目标受众,那么通常是可以的,但我们仍然看到太多网站不必要地变得不兼容,而只需付出一点点额外努力就能面向更广泛的受众。

      2016 年 7 月 7 日 上午 1:25

  14. Yves

    您好,
    有趣的文章,我感谢您对可访问性的关注。
    关于可访问性,您如何看待客户端网页生成(Angular、React 等)?使用 JavaScript 驱动的网页或“单页应用程序”真的有可能,并且仍然让所有残疾人访问吗?
    祝好,
    Yves。

    2016 年 7 月 7 日 上午 0:43

    1. Chris Mills

      理论上,您应该能够通过正确使用 WAI-ARIA 属性、渐进增强、语义元素等来使复杂的 Web 应用程序功能变得可访问。显然,应用程序越复杂,这将变得越棘手。另一种选择是提供网站或应用程序的可访问版本,该版本公开关键内容或服务。

      对于 HTML 表单和文本等基本功能,如果它们标记正确并且默认行为没有被破坏,那么没有理由不使它们变得可访问。

      2016 年 7 月 7 日 上午 1:30

  15. Niels Matthijs

    虽然不想吹毛求疵,但如果您使用统计数据,那么使用正确的统计数据至关重要。StatCounter 衡量的是使用量,而不是用户。如果您想要用户,您应该使用 netmarketshare 作为您的来源(那里的数字大不相同)。

    2016 年 7 月 7 日 上午 3:29

    1. Chris Mills

      我认为你有点吹毛求疵了。用户与使用量(浏览器的使用量,由用户)。数字是不同的,但大多数情况下显示的趋势基本相同。

      2016 年 7 月 7 日 上午 4:50

      1. Niels Matthijs

        好吧,是的,但为什么不使用正确的数字呢?Chrome 的份额为 48%(这对于您的情况也更好,因为超过一半的用户没有使用 Chrome),IE + Edge 的份额为 35%,Firefox 的份额为 8%。

        至少看起来你们没有选择最适合 Firefox 的数字;)

        2016 年 7 月 7 日 上午 4:56

        1. Chris Mills

          我明白你为什么说 Chrome 的这个数字对我们的论点略微有利,但还有桌面和移动设备数字之间的差异,另外它显示 Firefox 的百分比更小,这从我们自己的统计数据来看,感觉不太准确(而且读起来对我们来说更不利;-))。

          选择一个统计数据并不那么简单,你知道吗?;-)

          2016 年 7 月 7 日 上午 5:02

  16. Dietrich Ayala

    CSSLint 会警告各种浏览器兼容性问题,这样您在编写代码时就能了解兼容性问题!

    https://github.com/CSSLint/csslint/wiki/Rules#compatibility

    2016 年 7 月 7 日 上午 9:56

  17. Dietrich Ayala

    这是一个 Applescript,用于在 Safari 和 Firefox 中打开 Chrome 标签,以进行兼容性测试

    https://gist.github.com/autonome/c6d26250125047963f322f837a7aefa2

    2016 年 7 月 7 日 下午 17:17

  18. Hiroyuki Hatanaka

    您的图表都采用低色对比度,并且使用相同的色调。
    它们不适合色盲或视力弱的人。
    不适合“所有人”。

    2016 年 7 月 14 日 下午 16:44

    1. Chris Mills

      虽然我赞赏您对可访问性的关注和承诺,但我认为您有点过分了。蓝色背景和白色信息文本的对比度通过了 WCAG AA(我刚检查过)。蓝色文本没有通过,但它通常用于标题/大引号,而不是信息文本。

      我们可以在以后的文章中改进这一点,并且永远不要忘记这一点很重要。感谢您的评论。

      2016 年 7 月 15 日 上午 1:25

  19. Daniel

    另一个跨浏览器测试工具:http://www.browseemall.com

    2016 年 8 月 2 日 下午 15:16

本文评论已关闭。