CSS Houdini 介绍和 CSS 的未来

Houdini 是什么？

CSS 的未来

这篇文章最初发表在 Smashing Magazine 上，为了方便理解，我决定将其拆分成几部分。我会将文章转换成 Markdown 格式，每周在 DEV 上发布一部分。如果您想立即阅读全文，请随时在 Smashing Magazine 上阅读，直到所有部分在 DEV 上发布为止。谢谢。

一项新的 CSS 功能或改进需要很长时间才能从初稿发展成为开发者可以使用的、完全受支持且稳定的 CSS 功能。基于 JavaScript 的 polyfill 可以弥补浏览器支持的不足，以便在新的 CSS 功能正式实现之前使用它们。但它们在大多数情况下都存在缺陷。例如，scrollsnap-polyfill是几个可用于修复 CSS Scroll Snap 规范中浏览器支持不一致问题的 polyfill 之一。但即使是该解决方案也存在一些局限性、错误和不一致之处。

使用 polyfill 的潜在缺点是它们会对性能产生负面影响，并且难以正确实现。这个缺点与浏览器的 DOM 和 CSSOM 有关。浏览器根据 HTML 标记创建DOM（文档对象模型），同样，它根据 CSS 标记创建CSSOM（CSS 对象模型）。这两个对象树彼此独立。JavaScript 运行在 DOM 上，对 CSSOM 的访问非常有限。

JavaScript Polyfill 解决方案仅在初始渲染周期完成后运行，即 DOM 和 CSSOM 均已创建且文档已加载完毕。Polyfill 通过内联方式更改 DOM 中的样式后，会导致渲染进程再次运行，整个页面将重新渲染。如果 Polyfill 依赖于requestAnimationFrame方法或用户交互（例如滚动事件），则对性能的负面影响会更加明显。

Web 开发的另一个障碍是CSS 标准施加的各种限制。例如，只有有限数量的 CSS 属性可以原生地实现动画。CSS 知道如何原生地为颜色设置动画，但不知道如何为渐变设置动画。尽管存在技术限制，但始终需要突破界限，创新并创造令人印象深刻的 Web 体验。这就是为什么开发人员往往倾向于使用不太理想的解决方法或 JavaScript 来实现 CSS 目前不支持的更高级的样式和效果，例如砌体布局、高级 3D 效果、高级动画、流体排版、动画渐变、样式select元素等。

CSS 规范似乎不可能跟上行业对各种功能的需求，例如对动画的更多控制、改进的文本截断、更好的元素样式选项input、select更多display选项、更多filter选项等。

潜在的解决方案是什么？为开发人员提供一种使用各种 API扩展 CSS 的原生方式。在本文中，我们将探讨前端开发人员如何使用 Houdini API、JavaScript 和 CSS 来实现这一点。在每一部分中，我们将分别研究每个 API，检查其浏览器支持情况和当前规范状态，并了解如何使用渐进式增强技术来实现它们。

Houdini 是什么？

Houdini 是浏览器 API 集合的总称，旨在显著改进 Web 开发流程以及 CSS 标准的总体发展。开发者将能够使用 JavaScript 扩展 CSS 的新功能，连接到 CSS 渲染引擎，并告知浏览器如何在渲染过程中应用 CSS。这将带来比使用常规 polyfill 更显著的性能和稳定性。

Houdini 规范由两组 API 组成——高级 API和低级 API。

高级 API与浏览器的渲染过程（样式 → 布局 → 绘制 → 合成）密切相关。其中包括：

• Paint API - 浏览器绘画渲染步骤的扩展点，在此确定视觉属性（颜色、背景、边框等）。
• 布局 API - 浏览器布局渲染步骤的扩展点，其中确定元素的尺寸、位置和对齐方式。
• 动画 API - 浏览器复合渲染步骤的扩展点，其中图层被绘制到屏幕上并进行动画处理。

低级 API构成了高级 API 的基础。其中包括：

• 类型对象模型 API
• 自定义属性和值 API
• 字体指标 API
• 工作单元

一些 Houdini API 已经可以在某些浏览器中使用，而其他 API 将在准备发布时跟进。

CSS 的未来

与迄今为止推出的常规 CSS 功能规范不同，Houdini 的突出之处在于允许开发人员以更原生的方式扩展 CSS。这是否意味着 CSS 规范将停止发展，并且不会再发布新的 CSS 功能官方实现？答案并非如此。Houdini 的目标是通过允许开发人员创建易于标准化的工作原型来辅助 CSS 功能开发过程。

此外，开发人员将能够更轻松地共享开源 CSS Worklets，而无需针对特定浏览器进行错误修复。

这些文章都是咖啡带来的灵感。所以，如果你喜欢我的文章，觉得它有用，不妨请我喝杯咖啡！我会非常感激的。

感谢您花时间阅读这篇文章。请关注本系列的下一篇。如果您觉得这篇文章有用，请点赞 ❤️ 或 🦄，分享并评论。