构建 Web 并非易事

Web 最强大的特性也是构建 Web 如此具有挑战性的原因：它的通用性。当你创建一个网站时，你正在编写需要被不同设备和操作系统上的各种浏览器理解的代码。这很困难。

为了让 Web 能够以对用户和开发者都合理且可持续的方式发展，浏览器供应商共同努力将新功能标准化，无论是新的 HTML 元素、CSS 属性 还是 JavaScript API。但是不同的供应商有不同的优先级、资源和发布周期 - 所以新功能不太可能同时在所有主要浏览器上发布。作为一个 Web 开发人员，如果你依赖某个功能来构建你的网站，你需要考虑这一点。

比等待浏览器实现你需要的功能更具挑战性的是，要满足那些永远不会实现的功能。构建 Web 意味着支持较旧的（但有时仍然被广泛使用的）浏览器版本，它们具有永久锁定的时间怪癖和功能集。为此，在一个网站上选择使用某个特定功能而不是其他功能实际上意味着做出关于它将最佳支持哪些浏览器的决定。

浏览器兼容性项目诞生了

为了帮助开发者有意识地而不是偶然地做出这些决定，MDN Web 文档在其文档页面中提供了浏览器兼容性表，以便在查找你为项目考虑的功能时，你可以确切地知道哪些浏览器将支持它。虽然毫无疑问是有帮助的，但仅靠此资源并不能消除所有挑战。首先，它需要人们为他们使用的每个功能主动搜索兼容性数据，这对经验不足的开发者来说可能并不容易。此外，还存在这样一个问题：当你继承一个已经包含数百行甚至数千行代码的项目时会发生什么。逐行检查以寻找兼容性问题似乎不是一个合理的选择。

为了允许以编程方式访问浏览器兼容性数据，而不是要求开发者手动搜索它，MDN 社区正在努力将目前存储在数千个维基页面上的兼容性信息迁移到可机器读取的 JSON 格式，并将其存储在 GitHub 仓库 中。这为无数用例打开了大门，例如在开发者编写代码时在文本编辑器中显示兼容性信息，或者一个扫描整个代码库并标记开发者可能不知道的兼容性问题的审计工具。

该数据作为一个 npm 包 提供，你可以这样获取给定 Web 功能的兼容性信息

const compat = require('mdn-browser-compat-data');
let textJustify = compat.css.properties[‘text-justify’];
// returns a compat data object

它将返回存储在仓库中的数据，在本例中来自 text-justify.json 文件。你可以查询数据集，例如找出哪个 Firefox 版本添加了对 text-justify 的支持

textJustify.support.firefox; // returns “55”

兼容性数据结构由 JSON 模式 描述；除了版本号，它还包含有关可能需要为功能正常工作而设置的前缀或标志的信息。

该数据由 MDN 社区和浏览器供应商维护并保持最新，他们共同组成了 MDN 产品咨询委员会。委员会成员 同意推动对 Edge、Chrome 和三星互联网的兼容性数据更新，并在每次稳定版本发布后帮助审查为其浏览器标记的兼容性数据 PR。

从 DevTools 中查找兼容性问题

这个数据创造的可能性中一个有趣的例子是名为 compat-report 的项目，这是开发者 Eduardo Boucas 作为副项目开发的一个扩展，它在浏览器开发者工具中添加了一个兼容性面板。在里面，一个表格显示了任何给定网站在每个主要浏览器上的预期性能，在没有发现兼容性问题的版本中显示绿色，在发现少量问题的版本中显示黄色，在发现多个问题的版本中显示红色。这使开发者能够初步了解他们的网站在市场上的不同浏览器中的表现如何。

点击浏览器版本将启动更详细的报告，突出显示页面上每个样式表中存在兼容性问题的行。如果适用，扩展程序还将建议解决问题的方法，例如添加供应商前缀，如以下图像所示。

这个项目还处于早期阶段，但范围巨大，路线图雄心勃勃。目前它只分析 CSS，但将来它还可以标记 HTML 和 JavaScript 的兼容性问题。它甚至可以利用 MDN 上的大量 polyfill 不仅标记兼容性问题，而且还提供解决问题的方法。

扩展本身只是使用 HTML、CSS 和 JavaScript 构建的，其源代码在 GitHub 上 提供。如果你喜欢这个想法并想帮助我们进一步发展它，我们很乐意你贡献。