CSS Houdini 可能是 CSS 領(lǐng)域最令人興奮的進(jìn)展。Houdini 由多個(gè)獨(dú)立的 API 組成，每個(gè) API 都單獨(dú)交付給瀏覽器，有些 API 已經(jīng)交付（瀏覽器支持情況見(jiàn)此）。Paint API 就是其中之一。我對(duì)它非常感興趣，最近開(kāi)始思考如何在工作中使用它。

我能夠做到這一點(diǎn)的一種方法是將其用作避免重復(fù)造輪子的方法。在本文中，我們將討論這一點(diǎn)，同時(shí)將其與我們目前在 JavaScript 和 CSS 中使用的方法進(jìn)行比較。（我不會(huì)深入探討如何編寫(xiě) CSS Houdini，因?yàn)橐呀?jīng)有許多優(yōu)秀的文章對(duì)此進(jìn)行了介紹，例如這篇、這篇和這篇。）

Houdini 為 CSS 帶來(lái)了模塊化和可配置性

CSS Houdini 的工作方式帶來(lái)了兩大優(yōu)勢(shì)：模塊化和可配置性。這兩種方法通常可以使我們作為開(kāi)發(fā)人員的生活更輕松。我們?cè)?JavaScript 世界中經(jīng)?？吹竭@些概念，但在 CSS 世界中卻很少……直到現(xiàn)在。

下表列出了一些用例的工作流程，比較了傳統(tǒng)的 CSS 與使用 Houdini 的情況。我還添加了 JavaScript 以進(jìn)行進(jìn)一步比較。您可以看到 CSS Houdini 允許我們更有效地使用 CSS，類似于 JavaScript 世界如何發(fā)展成組件。

模塊化

使用 Houdini，您可以導(dǎo)入一個(gè) worklet 并使用一行代碼開(kāi)始使用它。

<code>CSS.paintWorklet.addModule('my-useful-paint-worklet.js');</code>

這意味著無(wú)需每次都實(shí)現(xiàn)常用樣式。您可以擁有自己的一組 worklet，這些 worklet 可用于您的任何項(xiàng)目，甚至可以彼此共享。

如果您除了樣式之外，還希望為 HTML 和 JavaScript 提供模塊化，那么 Web Components 是解決方案。

這與我們?cè)?JavaScript 世界中已經(jīng)擁有的非常相似。大多數(shù)人不會(huì)重新實(shí)現(xiàn)常用函數(shù)，例如節(jié)流或深度復(fù)制對(duì)象。我們只需導(dǎo)入庫(kù)，例如 Lodash。

如果 CSS Houdini 的普及程度提高，我可以想象我們會(huì)擁有 CSS Houdini 包管理服務(wù)，任何人都可以導(dǎo)入用于有趣的瀑布布局、背景圖案、復(fù)雜動(dòng)畫(huà)等的 worklet。

可配置性

Houdini 與 CSS 變量配合良好，這在很大程度上增強(qiáng)了自身能力。使用 CSS 變量，用戶可以配置 Houdini worklet。

<code>.my-element {
  background-image: paint(triangle);
  --direction: top;
  --size: 20px;
}</code>

在此代碼片段中，--direction 和 --size 是 CSS 變量，它們?cè)谌切?worklet（由三角形 worklet 的作者定義）中使用。用戶可以更改屬性以更新其顯示方式，甚至可以在 JavaScript 中動(dòng)態(tài)更新 CSS 變量。

如果我們?cè)俅螌⑵渑c我們?cè)?JavaScript 中已經(jīng)擁有的內(nèi)容進(jìn)行比較，JavaScript 庫(kù)通常具有可以傳遞的選項(xiàng)。例如，我們可以為速度、方向、大小等傳遞值給輪播庫(kù)，以使其按我們想要的方式執(zhí)行。在 CSS 中的元素級(jí)別提供這些 API 非常有用。

Houdini 工作流程使我的開(kāi)發(fā)過(guò)程更高效

讓我們來(lái)看一個(gè)完整的示例，說(shuō)明整個(gè)過(guò)程如何協(xié)同工作以簡(jiǎn)化開(kāi)發(fā)。我們將使用工具提示設(shè)計(jì)模式作為示例。我發(fā)現(xiàn)自己在不同的網(wǎng)站上經(jīng)常使用這種模式，但不知何故，每個(gè)新項(xiàng)目都要重新實(shí)現(xiàn)。

讓我們簡(jiǎn)要回顧一下我之前的經(jīng)驗(yàn)：

1. 好吧，我需要一個(gè)工具提示。
2. 它是一個(gè)框，一側(cè)有一個(gè)三角形。我將使用偽元素來(lái)繪制三角形。
3. 我可以使用透明邊框技巧來(lái)繪制三角形。
4. 這時(shí)，我很有可能挖掘我過(guò)去的項(xiàng)目來(lái)復(fù)制代碼。讓我想想……這個(gè)需要向上指，哪邊是透明的？
5. 哦，設(shè)計(jì)需要工具提示的邊框。我必須使用另一個(gè)偽元素并為指向的三角形偽造一個(gè)邊框。
6. 什么？他們決定更改三角形的指向方向？！好吧，好吧。我將調(diào)整兩個(gè)三角形的全部值……

這并不難。整個(gè)過(guò)程可能只需要五分鐘。但是讓我們看看使用 Houdini 如何做得更好。

我構(gòu)建了一個(gè)簡(jiǎn)單的 worklet 來(lái)繪制工具提示，并提供了許多選項(xiàng)來(lái)更改其外觀。您可以在 GitHub 上下載它。

感謝 Houdini，這是我的新流程：

1. 好吧，我需要一個(gè)工具提示。
2. 我將導(dǎo)入此工具提示 worklet 并使用它。
3. 現(xiàn)在我將使用自定義屬性對(duì)其進(jìn)行修改。

<code></code>

這是一個(gè)提示 ``` CSS.paintWorklet.addModule('my-tooltip-worklet.js') .tooltip-1 { background-image: paint(tooltip); padding: calc(var(--triangle-size) * 1px .5em) 1em 1em; --round-radius: 0; --background-color: #4d7990; --triangle-size: 20; --position: 20; --direction: top; --border-color: #333; --border-width: 2; color: #fff; }

<code>

這是一個(gè)演示！繼續(xù)嘗試使用變量！

CSS Houdini 打開(kāi)了模塊化、可配置樣式共享的大門(mén)。我期待看到開(kāi)發(fā)人員使用和共享 CSS Houdini worklet。我正在嘗試添加更多有用的 Houdini 使用示例。如果您有任何想法或想為此存儲(chǔ)庫(kù)貢獻(xiàn)代碼，請(qǐng)與我聯(lián)系。</code>

以上是CSS Houdini可以改變我們編寫(xiě)和管理CSS的方式的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！