在过去的几年里，我们见证了 Web 技术的诸多变化和发展。在 2020 年，我预见到我们 Web 社区将朝着两个主要趋势/目标发展：**可扩展性**和**互操作性**。让我们来详细了解一下。
可扩展性
可扩展性描述了人们可以将特定技术扩展到自身需求的程度。在过去的几年里，我们在开发（React 组件！Vue 组件！Svelte 组件！Web Components！）和设计（设计系统！）方面构建了一个基于组件的 Web。形式追随功能，这很有趣，不是吗？
现在我们正试图使该组件系统的外观和感觉更加独特。Web 上的可扩展性使我们能够根据自己的需求定制平台，并试验结果。
CSS 本身变得更加可扩展了……
CSS Houdini
借助 CSS Houdini，开发人员将能够扩展 CSS 对象模型中当前可能实现的功能，并告诉浏览器他们希望浏览器如何读取和渲染他们的 CSS。
这意味着以前在 Web 上不可能实现的功能，例如斜角或圆形布局，现在成为了可能。
如果您还不熟悉 Houdini，它是一个总称，描述了一些不同的浏览器 API，旨在提高浏览器性能。它使样式更加可扩展，并允许用户定义自己的 CSS 功能。Houdini 当前的 API 包括
借助这些 API，用户可以利用有意义的语义 CSS（感谢 类型化对象模型），甚至可以将其语义应用于 CSS 变量（属性和值）。借助绘制 API，您可以绘制画布并将其应用为边框图像（你好，渐变边框），或者 创建接受动态参数并使用一行 CSS 实现的动画闪光。
.sparkles {
background: paint(sparkles)
}您可以构建圆形菜单，而无需通过边距手动放置项目（通过布局 API），并且可以集成您自己的在主线程之外运行的交互（使用动画工作线程）。
Houdini 绝对是新年值得关注的焦点，如果您还没有开始尝试，现在正是开始尝试的好时机。
可变字体
另一种与提高网站性能和提供更多用户可扩展性目标相一致的技术是可变字体。随着如此多的新 可变字体 出现——以及 Google Fonts 最近的 beta 发布——可变字体现在比以往任何时候都更容易获得和使用。
可变字体是基于矢量的，并允许为各种字体轴（如粗细和倾斜）设置广泛的值。这些轴的插值允许字体在各个点之间平滑过渡。
这是一个示例
可变字体还允许使用新的轴，以帮助设计师和开发人员在他们的工作中更具创造力。以下是一些来自名为 v-fonts 的优秀资源的示例。
可变字体得到了相当好的支持，87% 的现代浏览器 支持所需的字体格式。
自定义属性
自定义属性与可变字体一样，也得到了良好的支持。虽然它们并不新鲜，但我们仍在 探索 可以使用自定义属性完成的所有事情。
自定义属性允许真正动态的 CSS 变量，这意味着我们可以在 JavaScript 中调整它们，从而分离逻辑和样式。一个很好的例子来自 David Khourshid，他向我们展示了如何创建 反应式动画 并同步样式而无需费力。
我们也开始在样式表中尝试更多逻辑。我最近发布了一篇 博文，解释了如何使用原生 CSS calc() 函数以及自定义属性来创建动态颜色主题。
这消除了处理 CSS 的额外工具的需要，并确保了这种主题技术适用于任何技术栈——这让我联想到我 2020 年的下一个愿景：互操作性。
互操作性
根据我在本文中的定义，互操作性是指在技术和人类需求之间协同工作的能力。从技术角度来看，在 Web 碎片化的现状下，许多公司在最近的过去迁移了技术栈，或者拥有多个内部技术栈，现在可能都希望保护其技术栈免受未来变化的影响，以维持某种程度的一致性。
Web Components
Web Components 试图通过从 Web 标准的角度解决基于组件的架构问题来解决此问题。其愿景是引入一种标准格式，无论是否使用库都可以使用，从而改善开发人员体验并在组件之间建立统一性。
每个 Web Components 都是封装的，并且可以在现代浏览器中无需依赖项地工作。这项技术仍在发展中，我认为我们将在 2020 年看到它取得长足的进步。
逻辑属性
逻辑属性挑战我们调整对如何在页面上应用布局大小的心理模型，以便使我们的页面在各种语言和阅读模式下更加友好。它们使我们的布局能够与用户体验互操作。
在英语和其他从左到右的语言中，我们会根据高度和宽度来考虑布局世界，并使用类似指南针的表达方式来表示边距、边框和填充（顶部、左侧、底部、右侧）。但是，如果我们以这种方式设置样式，然后将语言调整为从右到左的语言，例如阿拉伯语，那么我们段落的 padding-left 就不再表示从我们阅读开始位置的填充。这会破坏布局。
如果您编写 padding-inline-start 而不是 padding-left，则填充会在切换到从右到左的语言时正确切换到页面的另一侧（阅读的开始位置），从而保持布局完整性。
首选项媒体查询
首选项媒体查询也正在兴起，并且在 2020 年将拥有更多功能。它们使我们能够调整我们的网站，以适应喜欢高对比度或深色模式的人，以及那些喜欢动画较少的体验的人。
即将到来的偏好媒体查询包括
在这个视频中，我讲解了如何使用自定义属性进行样式设置，来创建一个用于暗模式的偏好媒体查询。
亚军：速度
速度也是我在 2020 年看到网络世界高度关注的一个话题。我上面提到的几种技术都具有提升网页性能的优势，即使这并非其主要目标（例如，可变字体如何减少下载的字体总大小）。当我们考虑到网络速度可能不足的地区即将涌现的下一批十亿用户时，性能变得越来越重要。
此外，WebAssembly（一种允许用户更接近浏览器底层进行代码编写的封装器）正在流行起来。我也预见到未来一年会有更多关于WebGL的工作，它使用类似的技术来实现高级和快速的图形渲染。编写更底层的代码可以带来更快的体验，在某些 WebGL 场景下，这可能是为了防止高级可视化导致浏览器崩溃所必需的。我认为我们将看到这两种技术的发展，并在 2020 年看到更多 WebGL 演示。
网络在不断发展，这正是它如此令人兴奋的原因。在 2020 年，您认为哪个目标或技术值得关注？请在评论中告诉我们！