CSS Houdini
CSS Houdini 是一組公開 CSS 引擎部分功能的 API。這使得開發者能夠更輕鬆地為 CSS 建立擴充套件。這些擴充套件可以用於實現瀏覽器中尚不可用的功能的 Polyfill，嘗試新的佈局方式，或者新增創意邊框或其他效果。
雖然許多 Houdini 示例展示了這些 API 的創意可能性，但它也有許多實際的用例。例如，你可以使用 Houdini 建立帶有型別檢查和預設值的高階自定義屬性。
基本示例
常規的 CSS 自定義屬性由屬性名和值組成。因此，我可能會建立一個名為 --background-color 的自定義屬性，並期望它被賦予一個顏色值。然後該值在 CSS 中就像顏色值一樣被使用。
:root {
--background-color: blue;
}
.box {
background-color: var(--background-color);
}
然而在上面的例子中，沒有什麼可以阻止有人為這個屬性使用其他值，也許將其設定為長度。一旦這樣做，任何使用該屬性的地方都不會有背景顏色，因為 background-color: 12px 是無效的。當瀏覽器遇到它們不認為是有效的 CSS 時，它們會忽略那一行。
然而，使用 @property，我們可以宣告一個具有 <color> syntax 的自定義屬性。這表明我們需要此屬性的值是一個有效的顏色。
@property --background-color {
syntax: "<color>";
inherits: false;
initial-value: blue;
}
Houdini Worklet
Houdini 的一個特性是 Worklet。Worklet 是一個用 JavaScript 編寫的模組，它使用 Houdini API 之一來擴充套件 CSS。你可以在 PaintWorkletGlobalScope.registerPaint() 頁面上看到一個 worklet 示例。一旦 worklet 被註冊，你就可以像使用任何其他值一樣在 CSS 中使用它。這意味著即使你不是 JavaScript 開發者，你也可以透過使用其他人建立的 worklet 來訪問 Houdini API。
參考
CSS @規則和描述符
@property @規則允許你註冊一個高階自定義屬性。