这是关于网络兼容性的网络从业者系列对话的第二篇。本周，我们采访了 Chris Coyier (@chriscoyier)，他是 CSS-Tricks、Digging Into WordPress 和 ShopTalk Show 背后的多产网络开发者和作家。Chris 是代码片段演示网站 CodePen 的创始人之一。他最近出版了 关于 SVG 的书籍。现在，他将与我们谈论网络兼容性。

这些对话是对我们最近发表的文章“让网络为所有人服务”的补充，这篇文章呼吁开发者构建跨浏览器兼容的网络体验，以 最大化曝光度和市场规模；防止界面错误，这些错误会导致用户永远离开；以及 展示专业能力。

在我们的第一次对话中，Rachel Andrew 说 让网站在不同浏览器中正常工作是做好工作的一部分；她说，即使使用新的浏览器功能而不会破坏网络，也“很有趣，也很解放”。让我们看看 Chris Coyier 是否同意。

Chris，跨浏览器兼容性对你来说意味着什么？

我认为这个术语本身就很清楚：让东西在许多不同的浏览器中正常工作。这些浏览器是什么，在不同的团队中肯定会有所不同。即使是那些目标是极端跨浏览器兼容性的人也有一定的限制。现在没有多少人担心 Netscape Navigator 了。

你多久需要考虑一次跨浏览器兼容性？

我认为随着时间的推移，我越来越少地考虑这个问题，但这并非因为我解决跨浏览器问题的能力提高了，而是因为浏览器越来越一致了。仍然很容易指出某些不一致之处，但很难说我们现在比几年前更糟糕了。

尽管如此，我认为在我的“实际构建东西”生涯中，至少每周都会出现需要进行一些跨浏览器考虑的情况。由于我在 CSS-Tricks 上工作，所以几乎每天都要考虑这个问题。在一个参考网站上，谈论浏览器功能而不提及支持是不可取的。

去年夏天，Geoff Graham 在 CSS Tricks 上写道，“我们应该理所当然地知道如何构建跨浏览器兼容的网站。” 你认为雇主和市场真的需要开发者具备这种知识吗？他们会对初级开发者有这种期望吗？还是说这更像是高级技能？

前端网络开发是一份工作。了解、测试和修复跨浏览器问题是这份工作的一部分。

前端网络开发是一份工作。了解、测试和修复跨浏览器问题是这份工作的一部分。我不确定我会期望初级开发者在刚开始的时候就非常擅长处理跨浏览器问题，但我希望他们愿意学习并处理这些问题。对于比初级更高的职位，如果一个前端开发者不能或不想处理跨浏览器问题，那将是一个很大的红旗。

是什么促使你付出额外的努力来构建一个跨浏览器兼容的网站？

金钱。人们会为对他们有效的网站付费。举个例子：就在上周，我们正在 CodePen 的新部分开发一些拖放功能。在 Chrome 中运行良好，但在 Firefox 和 Safari 中都不起作用。Tim Holman，我们的一名前端开发者，不得不花费一天的大部分时间来为两者实现不同的修复。好在我们在发布之前做到了，否则我们肯定会让一些潜在客户失望。

我不觉得有必要为了某种神圣法令而修复跨浏览器问题，这种法令要求所有体验都平等。归根结底，这关乎金钱和客户满意度。

有什么能说服你不付出这种努力？是什么？

如果成本效益的估计相差太大。如果我估计修复一个跨浏览器问题将花费一个月的开发时间，而只帮助 0.1% 的客户，我就可以做一些草稿计算，并可能得出不这么做的决定。谢天谢地，大多数问题并没有那么糟糕。

尽管我相信“这是工作的一部分”，但我还是要补充说，真正喜欢做这种工作的开发者很少。我可以说我自己，我喜欢解决问题并关闭工单的那一刻，但通往那里的旅程可能令人沮丧。我会谨慎地将太多这种工作分配给任何一个开发者。

你曾经需要说服客户或老板构建一个跨浏览器兼容的网站很重要吗？你是怎么做的？

通常情况正好相反。是我构建了一个网站，然后发送给客户，发现它没有按照我的预期工作。所以是他们教育我关于跨浏览器兼容性的。

如果我必须参与“说服”会议，我可能会尽可能实用地处理这个问题。让我们看看一些数据，选择一个合理的浏览器支持范围，并达到这些目标。

你能想到你遇到的特别棘手或有趣的兼容性错误吗？是在哪个网站/产品上？它上线了吗？还是你在上线之前就发现了？

几周前，我遇到了一个这样的问题。一个人写信告诉我，CSS-Tricks 很难滚动。我以前从未遇到过这种情况，而且我一直无法复制它。我知道我只拥有一台开发机器，而且它是一台性能非常高的 MacBook Pro，所以我并没有怀疑什么，我只是无法复制它或深入研究修复它。

她给我发了这个问题的视频，这使它变得非常清楚。Chrome 正常。Firefox 正常。是她使用的一种名为 Pale Moon 的特殊浏览器。它只适用于 Windows，而且在我的正常“在 Windows 上测试东西”工具中不可用。

在稍微了解这个浏览器后，它提到它的一个特性是优化资源使用。我相信在大多数情况下这是一件好事，但它让我想到，如果 CSS-Tricks 以某种方式请求了比 Pale Moon 愿意提供的更多内存，那么可能会导致这个问题。整个页面上下都被绘制了什么？背景！CSS-Tricks 上的背景是 CSS 渐变和 SVG 的组合。不幸的是，它并不特别省内存。为了测试，我让她设置一个用户样式表来删除 SVG，它工作得很好。

我可能不会仅仅为了 Pale Moon 而改变当前的设计，但在重新设计时，它可能会促使我对背景做一些更简单的事情。

你曾经有过特定的经历，导致你在下一个项目中更加重视跨浏览器兼容性吗？

我觉得每次遇到跨浏览器问题，都会促使我做越来越少的花哨的事情。我喜欢尝试新事物，然后在生产环境中，我通常会想，“我们能用最基本、最可靠的方式来完成这件事吗？”

在你的流程/工具链/等中，有没有什么可以让你轻松地包含或测试兼容性的部分，你会建议每个网络开发者将其纳入自己的流程中？

现代浏览器开发人员工具在模拟不同的视窗、连接速度和模拟移动头部方面做得相当好，但他们在功能方面的支持是相当固定的。我知道我经常打开我的 iOS 模拟器，以便“真实地”查看 Mobile Safari，而且我可以使用 Safari 的开发人员工具在其中四处查看，这是很棒的。

我真的很喜欢 BrowserSync 如何允许我使用任何其他设备在本地网络上打开一个开发站点，因此我经常使用它。

不过，我主要的跨浏览器测试工具是 CrossBrowserTesting.com。它非常棒。

你会对从编码训练营毕业的新开发者说些什么关于跨浏览器兼容性的？

在所有网络事物中，都需要一定程度的同理心

如果你的工作是前端开发，那么这些东西绝对是你的工作。如果你对此嗤之以鼻，那么这份工作可能不适合你。在所有网络事物中，都需要一定程度的同理心，所以如果你不能扩展自己的同理心去理解人们使用不同的浏览器/平台/版本，那么这可不是好兆头。

Chris 访谈中的建议

• 调试兼容性错误时，第一步是完全理解它出现的浏览器环境。是什么操作系统？什么设备？什么屏幕尺寸/方向？什么浏览器？什么版本？
• 如果对某个功能是否适合你的受众有任何疑问，请寻找更“可靠”的方法来实现必要的功能。
• 学习使用现代浏览器开发人员工具的高级功能。它们可以模拟连接速度、屏幕尺寸和头部差异。