互联网发展的速度超乎你我的想象。不过“水能载舟，亦能覆舟”。快速发展虽然创造了无限机会，但是也同样衍生了其他问题。Mozilla 向大家阐述目前的网络环境，以及我们最关心的问题：跨浏览器兼容性。
据统计，现有数百万个网站对一个甚至多个主要浏览器产生兼容性的问题，也造成极差的用户体验。Web 开发者社区应该修正此问题。
互联网在过去 20 年里有着大幅度的转变。1996 年大约只有100 万个网站；现在已经超过 10 亿个网站。同样，当年大约只有 5000 万个网民；现在已超过 30 亿上网人口。面对如此多的网络内容，现在大约有 24000 款移动设备，共达到 81 亿台联网设备让大家随时享受。
从上图可看出：与 20 年前相比，上网人口成长了 60 倍、网站数量是以前的 1000 倍、上网设备种类增长了 24000 倍。
内容、设备、用户的爆炸性增长，让「跨浏览器兼容性」也是自 1996 年以来更亟待解决的问题。知名网站〈Stack Overflow〉上就有 55,000 个问题包含了「跨浏览器（cross-browser）」的关键词在内，更有数不清的问题是在询问「在某个浏览器中的运作情形」。任何有关特定浏览器显示特定网站的问题，当然也就是潜在的兼容性问题。
上图说明：在〈Stack Overflow〉网站中，包含以上关键词在内的问题数量。
所以，跨浏览器兼容性还是个不小的问题。除了 Mozilla 长期注意这件事情之外，我们认为其他人也该时时关心一下。为什么要关心这个问题？开发者怎能确定所有人都跟你用一样的浏览器？每个人的需求与习惯不尽相同。几乎没有人会因为仅一个网站不能正确显示内容，就换个浏览器。满足所有人的需要，就代表你确实掌握了自己的实力。而且现在有很多工具可以用协助你轻松达成。
那么到底是哪些因素造成了跨浏览器不兼容呢？答案很复杂。以下是目前最常见的原因：
- 开发者用了某款浏览器的专属功能（如特定前缀），以达到特殊效果。
- 浏览器厂商在某功能标准化之前，就快速完成产品以供开发者所需。
- 浏览器厂商在构建标准或修复错误的速度过慢。
- 某些网站可能布署了「识别用户浏览器（User Agent Sniffing）」，以针对不同的浏览器传送不同的内容。
- 开发者可能过于依赖单一工具（又可能仅支持单一浏览器），因此忽略了跨浏览器兼容性的错误。
- 产业的成长力吸引更多Web开发者加入，但也造成开发者的平均水平被拉低。
上图说明：其实 W3C 已经规范 12,106 组 API，但未有任何一款浏览器完全实现。而且开发者使用 Chrome 的比例失衡，远超过用户的比例。
在互联网发展初期就有某些挑战等着我们去解决。当然，Web 的开发水平在这些日子以来已有很大进步。许多产品与工具可帮助我们在所有浏览器上构建绝佳的体验。
开发者应改详细阅读以下几点并认真思考，让自己的下个网站能向所有人提供更丰富的内容。
使用其他浏览器的人比你想象的要多
许多开发者认为自己使用的浏览器，就是其他人所用的唯一浏览器，因此只针对该浏览器开发网站。根据某些统计数字指出， 70% 的 Web 开发者在台式机上使用 Chrome，但只有 45% 的网民是跨所有设备都使用 Chrome，也只有 57% 的网民在台式机上使用 Chrome。只在 Chrome 构建并测试网站，就忽略了将近一半的全球用户。
浏览器市场占有率也依地理位置不同而有所不同。Chrome、Firefox、IE/Edge 在许多地方都独占鳌头，但用户的比例不一。德国人比较爱用 Firefox；日本人则常用 IE；不少澳洲人选用 Safari。每 5 个越南人就有超过 1 人使用 Chromium 的分支「Cốc Cốc」浏览器。只对单一浏览器设计自己的内容，就会错失这些较独特的市场。
其实，你爱用的浏览器功能，不一定适用于其他浏览器。浏览器厂商对不同功能往往有不同的开发安排。所以可能一堆人无法享受某浏览器的新 API。
这些因素往往会在意外状况下一起发生：选用了所有浏览器不支持的 API，只用单一浏览器测试自己的网站，接着在该浏览器并不普及的市场中发布了网站，结果就可能先丧失超过一半的潜在用户，也就等于错失了许多收益与客户。我们当然应该多花点心思避免类似的情况。
兼容性将影响网站亲和度
可跨浏览器兼容的网站，代表着它必须针对未知的客户端环境设计并撰写程序代码，才能尽可能让最多人接触到网站内容。而用户当然也可能是身心残疾人士，且相关人数可能超乎你的想象。如果你的网站能在所有浏览器上都运作畅通，却忽略了屏幕阅读软件（Screen reader），也就又失去了可能的机会。
身心残疾者也是一个庞大的市场。举例来说，光是美国国内视力障碍的网民总人数，就超过全加拿大的上网人口。最新的 Web 功能早就可以满足这类用户的需要，就等开发者实际开发而已。
关于网站亲和度的存取技术，可不仅是对身心残疾者有所帮助，举例来说：
- 更适合阅读软件执行的网页，也就能更贴合搜索引擎算法。简单的存取技术，例如为图片设定替换文字、在链接中使用叙述性的文字、仅 CSS 用于网页风格、使用 HTML5 的语法卷标，都能提升整体网页的搜索引擎优化（SEO）。
- 影音内容的转换，不仅对听障人士有所帮助，也有助于位处低带宽地区（无法下载完整影片）的移动设备用户，也能解决嘈杂环境中听不到影片声音的情况。更多文字内容也有机会与关键词产生关联性。所以同样和 SEO 息息相关。
用户不切换浏览器，只切换网站
你可能想说用户会换浏览器再进入你的网站，但其实许多人不会换，或根本无法换浏览器。
用户对无法运作的东西没什么耐心，而是直接换去竞争对手的网站就好。某个关键环节要是发生错误，就可能让潜在用户一去不回。根据 Akamai 的统计：
- 32% 的用户只要在网站上遇到问题，几乎就不会进行任何在线交易了。
- 35% 的用户更会对网站留下负面印象。
- 45% 的人再也不会上你的网站。
- 超过 22% 的人会离开网站找其他没问题的网站。
不只如此，许多用户根本不知道该如何安装新的浏览器，甚至不知道什么是浏览器；其实很多人不知道「网站」、「浏览器」、「搜索引擎」之间的差异。
即使知道可以、想要安装新的浏览器，也可能没办法安装。许多公司限制员工只能用某款浏览器，或是如图书馆中的公用计算机也无法安装其他软件。
举例来说，微软（Microsoft）曾要求用户在 2016 年 1 月 12 日之前改用新版浏览器，但直到 2016 年 3 月为止，IE 用户仍超过 1/3 继续在用过期且再无安全更新的版本。从 2015 年 6 月到 2016 年 5 月的这一年里，还有 2.07% 的用户在用已停止更新的 IE8；同一年里超过 3/4 的时间，还有 1.59% 的人在使用 IE9。而 IE10 在全年有 10.95% 的市场占率。另外值得一提的是，从 3 月开始，这些浏览器的使用率已经大幅度下滑。
不顺畅的上网体验绝对会赶走用户。如果网站有一半流量是来自于不同的浏览器，而你也想维持这些流量，当然就应该用此款浏览器测试自己的网站。
上图说明：至少有 43% 网民使用的浏览器，与开发者所偏好的不同。而且不同国家所爱用的浏览器也大有不同。
兼容性=你自己的实力
构建 Web 内容需要非常专业的技术，可不像简单的打扫环境而已。我们都为自己的作品而自豪，不断磨练自己的技术，企图展现自己的专业程度。因此必须：
- 随时关注最新的技术与框架。
- 仔细测试并构建跨浏览器/平台的 App，为功能尚未完整的浏览器找出解决之道。相关体验又是否为人所接受？
- 确认残障人士也能轻松读取网页内容。
- 确保一般读者乐于接收你的内容，也要能满足自己/用户的需求。
因此，身为网站开发者，你所成功发布的网站也就代表你自己的履历。你的客户、同事、目前与未来的老板，都会在乎是否能享有绝佳体验。
但往往时间与业务上的限制而无法尽善尽美。你必须先满足交件期限；你的老板可能只在乎 iPad 上是否能正常显示网站，根本没听过「网站亲和度」或「可存取性」。你在期限内根本无暇修正 IE 错误。即使无法达到最理想的状态，也应当在规定时间内尽力完成。
期限逼近时，你会希望自己所用的框架也能测试跨浏览器兼容性，这样可帮你省下许多工夫。但你的网站并非纯粹的框架程序代码，而且你必须全权负责。跨浏览器兼容性的测试工作应脚踏实地，不能想着抄捷径去完成。
写程序代码必须努力坚持；为需要的人提供信息；所建立的丰富功能也要能让所有人享受。这些都是优秀 Web 开发者的终极目标。
许多新工具都能帮上忙
现在你知道「重视自家网站兼容性」的理由了，但要怎么做呢？
- 如果在别人的网站上发现错误，就到 webcompat.com 报错吧！如果你在为自己的网站排错，就应该常上去看看。
- 用不同的浏览器测试自己的网站，并站在用户的角度浏览整个网站。通过浏览器开发者工具的控制台寻找错误。目前主流的PC版浏览器都已内置强大的开发者工具，可协助找出排错问题，甚至可用于移动版：
- Firefox dev tools
- Chrome dev tools
- IE/Edge dev tools
- Safari dev tools
- Opera dev tools
- 如果找到的问题并非发生在自己的网站上，就可能是浏览器出错了！立刻回报错误，以便该款浏览器的开发者尽快修复：
- Mozilla Bugzilla
- Chrome issue tracker
- IE/Edge
- Safari/Webkit
- Opera
- 若能在自己的布署过程中整合常用的跨浏览器测试工具，就能测试得更顺利：
- BrowserStack
- Sauce Labs
- Browserling
- 在自己的网站上使用某个 Web 功能之前，先确认有哪些浏览器已经工作：
- Caniuse
- MDN 的兼容性表格
- Kangax 的 ECMAScript 兼容性表格
- 先了解程序代码撰写工具，可提升跨浏览器的兼容性：
- Autoprefixer、CSSNext、Oldie，及其他 PostCSS 插件，都能写出纯粹、新版 CSS 且不会在旧版浏览器中间断（Break）。
- Modernizr 可协助找出浏览器之间的工作差异并处理（可用以取代 UA sniffing）
- @supports 协助你为网页体验创建更进步的强化功能，用于更多功能更强的浏览器
- 请多了解网页的众多功能与小秘诀。知道越多就会越爱网页：
- MDN
- Google Developers
- W3C Developers
