不错的网站 来自 Google(以及客座撰稿人),其中包含大量关于 Houdini 可以做什么的有趣演示。再加上 Una 的文章。这些都是 Paint API 演示。从技术上讲,Houdini 是一组 七件事,它们都非常酷,而 Paint API 只是其中之一。Paint 很有趣,但当我们获得 Layout API 时,事情将开始变得非常奇怪,我认为。
我认为,当您看到如此少的代码就可以实现如此有趣的示例时,Houdini 的价值就更加清晰了(Una 的五彩纸屑)。
您导入它,您使用它。您可以使用 CSS 自定义属性进行控制。上面那个不到 1 kB。
我感觉 Houdini 的早期故事是,它将成为这些非常底层的 API,这些 API 将几乎被平台人员用来以更安全的方式对新的平台功能进行原型设计。现在的故事更像是:五彩纸屑!我喜欢这两个故事。
Firefox 在这里仍然感觉像一个很大的通配符。他们说它“值得进行原型设计”,但在他们的平台团队裁员之后,这感觉有点牵强。例如,Paint API 是可以填充的。
(async function() {
if (CSS['paintWorklet'] === undefined)
await import('https://unpkg.com/css-paint-polyfill')
CSS.paintWorklet.addModule('https://unpkg.com/houdini-tesla/dist/worklet.js');
})()
而且那个 polyfill 只有 ~5kB,所以也许这没问题?
Vincent De Oliveira 的演示 一直是我最喜欢的。虽然它们都相当艺术,但它们也感觉像是您可能想在 Web 上尝试做的某些实际 UI 内容,但传统上感觉有点难以完美地实现。
这是 Estelle Weyl、Ruth John 和 Chris Mills 写的 一篇不错的教程,它不仅介绍了 Paint API,还介绍了 Typed OM(不太闪亮,非常实用)。
出于某种原因,Houdini 让我想起旧的、被遗弃的 CSS 着色器:在这两种情况下,示例看起来都很好,但 CSS 着色器被 由于安全问题而放弃。
当一些新想法出现在 Web 上时,感到兴奋是件好事,但回顾过去,即使一些想法看起来很好,也可能因为一些问题而被放弃。我希望所有安全问题最终都能得到解决,而不必完全放弃整个项目(一些问题已经得到解决,例如历史记录泄漏问题)。我已经有了使用
<style scoped>
进行实验的经验,就像当时一样,发现几年后它被放弃了,即使它之前不仅在 Chrome 中实现,还在 Firefox 中实现(在旗帜下)。作为它的一部分,可以填充,看起来它将比其他提议有更好的未来。非常兴奋地看到 Houndini 将如何改变 Web。希望它今年能发布。