“常青”并不意味着立即可用

我有一位同事，他很聪明、能力强、并且精通技术。和一样，他们全职从事网络工作。

当他们在会议中共享他们的屏幕时，我会发现自己失去联想专注于他们 Chrome 浏览器副本中的红色更新按钮。

单击此按钮将启动将 Chrome 更新到最新稳定版本的流程。

我提出了一些探究性问题，询问他们多久重启一次，这也会迫使 Chrome 在重新启动后更新。这就是“常青”浏览器的意义所在，对吧？它很容易确保您始终使用最新最好的版本。

事实证明，他们更愿意等到绝对必要时才更新，因为这会干扰他们日常的工作流程。他们的行为是可以理解的。他们优先考虑整体计算体验的质量，而不是迎合特定应用程序的需求。

和一样，我的同事也使用顶级的笔记本电脑来完成工作。这意味着笔记本电脑可以持续数月而无需重启。具有讽刺意味的是，这可能是一种情况，即破旧的笔记本电脑 有条件地被迫具有更快的浏览器升级路径。

常青浏览器

在常青浏览器出现之前，您需要访问制造商的网站，手动下载并安装更新。在此之前，您必须使用 CD 或软盘。

相比之下，常青浏览器 是任何可以自动更新自身的浏览器。我的意思是，浏览器会自动下载添加新功能和修复错误所需的代码，一旦浏览器制造商发布该代码，更新就会自动进行。更新本身会随着

• 显示给使用浏览器的用户的提示，该提示会触发应用程序重启，
• 在后台进行的下载，并在应用程序重启时应用，或
• 在设备重启时应用。

浏览器本身

几乎所有主要的浏览器都是常青的。这包括 Google Chrome、Microsoft Edge 和 Mozilla Firefox。

Apple Safari 是准常青的。我的意思是它会自动接收更新，但奇怪的是需要通过 macOS 操作系统更新界面进行更新，而其他系统范围的更新都位于此界面。

如果您没有注意，Safari 团队在过去几个月里一直在对他们的浏览器进行大量改进——我希望看到他们通过使浏览器更新路径与现有的 macOS 和 iOS 升级工作流程分离来继续这一趋势。

情况

随着Internet Explorer 的真正最终死亡，我们真的意思是这一次是真的，常青浏览器现在是台式机和笔记本电脑浏览器的主要考虑因素。这很棒！这意味着我们可以花费更少的时间担心谁可以使用什么。

花费更少时间并不意味着花费没有时间。

延迟效果

在caniuse.com 上所有常青浏览器的支持并不一定意味着在一个人使用的设备上存在支持——已发布的更新不会自动立即应用。

由于这两个因素，我建议您用一些克制来抑制您的兴奋。急于使用新事物和闪亮事物可能会非常诱人。相信我，我并不免受这种冲动的影响——CSS 即将从很棒变成惊人，使用新功能的冲动是真实存在的。

相反，请等待一下。使用平台的能力创建使用 CSS 和 JavaScript 的渐进增强体验。

利用平台

网络非常擅长具有弹性，前提是您要按照其本质 进行操作。

CSS 和 JavaScript 都能够有条件地为支持新功能的浏览器提供体验，而为不支持新功能的浏览器提供备用体验。

与其查看 caniuse.com 上某项功能的支持表，然后想“我希望更多浏览器支持此功能，这样我就可以使用它！”，不如想“我今天就要使用此功能，但将其视为一项实验性功能”。

——Jeremy Keith，“持续部分浏览器支持”

JavaScript

您可以使用 JavaScript 查询浏览器是否支持某个功能。例如，Navigator 接口 提供了一种机制来查询用户代理的功能。

if (!(“geolocation” in navigator)) {
  // Logic if a user's current geographic location isn't available
} else {
  // Logic that is based on a user's current geographic location
}

在此示例中，我正在反转对浏览器 Geolocation 接口支持的请求。尽管其语法最初有点难以解析，但它有助于强调渐进增强方法。

假设从一开始就不支持地理位置功能，并提供一种方法来适应使用此浏览器的用户（例如手动输入邮政编码等）。在解决此用例后，您可以自信地为支持地理位置的浏览器构建体验。

这种想法也扩展到所有其他浏览器功能和功能。

CSS

与大多数其他编程语言一样，CSS 也允许我们使用类似if 的语句。

例如，@supports at 规则 允许您创建一个条件语句，该语句以浏览器是否支持某项功能为目标，然后对其应用逻辑。支持该功能的浏览器将使用这些样式，而不支持该功能的浏览器将忽略它们。它是一个简洁、巧妙、适应性强的解决方案。

.component {
  /* Base appearance */
}

@supports (grid-template-columns: subgrid;) {
  .component {
    /* Styling and positioning enhancement tweaks if subgrid is supported */
  }
}

在此示例中，这种渐进增强方法确保组件的内容和功能在所有浏览器中都得以保留，但仅为能够支持这些功能的浏览器创建花哨的布局。

什么时候可以删除这些内容？

是的，这种方法增加了更多代码，更多代码意味着更多复杂性和维护。但这是一段非常重要的代码。您甚至可以将其称为技术债务，而且您是对的。但技术债务可能是件好事，就像对未来的投资。

当不再需要这种复杂性时，您可能希望将其删除。在常青浏览器的时代，知道何时这样做是困难的，但我有一些建议

耐心是一种美德

在等待方面，我建议在发布新功能后的 6 个月左右才开始考虑是否可以删除功能检测。这说明了

• 重启
• 更新拖延者
• 更新回避者
• 硬件刷新周期
• 企业更新策略
• 等等。

我还要说，大约六个月的时间框架是针对一般的，全球网络受众。如果你针对的是特定受众，这个估计就会改变。如何知道你实际上服务的是谁？分析，是的，但还有与人交谈。

也许不要

记住：幸存者偏差是真实存在的。你正在使用的全新功能是否会阻止有人使用你的网站或网络应用程序？我之所以这么说，是因为有些人

• 被迫使用由第三方管理的设备，
• 故意避免更新他们的硬件和软件，因为害怕失去与世界互动的能力，
• 明白他们的设备有问题，但不知道如何解决，以及
• 使用“已死”的常青浏览器，这些设备曾经接收浏览器更新，但现在不再受其制造商支持。

在创建网络体验时，我们没有针对特定的设备、浏览器和人。网站和网络应用程序需要适应这些情况的近乎无限的组合，才能有效。这种适应性是使网络成为如此成功的媒介的很大一部分。

考虑做一些艰苦的工作，让它变得容易，永远不要删除功能查询和@supports语句。这将创建一个强大的方法，可以优雅地适应过去和未来。

未来是不确定的

我们已经远远超出了台式计算机的时代。浏览器出现在越来越多的地方：手机、平板电脑、手表、电子书阅读器、数码相机、售货亭、电视、家用助理、自动售货机、相框、图形计算器、ATM机、POS终端、健身器材、游戏机、广告牌、冰箱、虚拟现实和汽车。

谁知道未来浏览器将包含在哪些设备中，或者它们将具有什么功能？用一种可以适应它方法来保护自己免受未来（以及过去）的影响。

---

感谢Jim Nielsen的反馈。