CSS 中的轉換和資料保護功能
CSS 自訂屬性 (又稱 CSS) 變數 可讓您在 CSS 中定義自己的屬性，並在整個 例如 CSS、CSS、CSS 和 JS。雖然目前非常實用，但當中的事情難以因應 但可能取值不好，因此不小心按時 而能以非預期的方式覆寫該變數的值 您無法予以轉移運用 Houdini 的 CSS 屬性和 值 API 級別 1， 現已支援 Chrome 78 版，這些缺點經過簡化 建立各種自訂屬性的強大威力
什麼是 Houdini？
在介紹新的 API 之前，我們先快速介紹 Houdini。CSS-TAG 《Houdini Task Force》一般稱為 CSS Houdini 或 Houdini "開發能解釋『魔法』」的功能「網站樣式和版面配置」 Houdini 規格的集合如下 目的是開啟瀏覽器的顯示引擎功能，同時 更深入瞭解我們的樣式和擴充算繪引擎的能力。 透過這個方式，您可以在 JavaScript 和 polyfilling 中輸入 CSS 值，也可以開發新的 CSS 如未達到預期成效能讓烏迪尼 激發網路創意
CSS Properties and Value API 級別 1
CSS 屬性與值 API 級別 1 (Houdini Props and Vals) 能讓我們為自訂屬性提供結構。這是目前 以下情況適合使用自訂屬性：
.thing {
--my-color: green;
}
自訂屬性沒有類型，因此可能會在非預期的情況下遭到覆寫
管理基礎架構舉例來說，如果使用網址定義 --my-color，會發生什麼事？
.thing {
--my-color: url('not-a-color');
color: var(--my-color);
}
由於 --my-color 沒有輸入，所以不知道網址無效
顏色值！使用時，就會改回使用預設值 (color 的黑色表示，
background 的透明)。運用 Houdini Props 和 Vals 自訂屬性
進行註冊後，瀏覽器即可知道哪些內容「應」！
現在，自訂屬性 --my-color 已登錄為顏色！這樣一來，
瀏覽器允許哪些值，以及這些值應如何輸入並處理
資源！
已註冊屬性的構成元素
註冊屬性的方式如下：
window.CSS.registerProperty({
name: '--my-color',
syntax: '<color>',
inherits: false,
initialValue: 'black',
});
它支持下面的選項：
name: string
自訂屬性的名稱。
syntax: string
如何剖析自訂屬性。如需可能值的完整清單，請參閱 CSS 值和單位規格。預設為 *。
inherits: boolean
指出是否繼承父項的值。預設值為 true。
initialValue: string
自訂屬性的初始值。
進一步瞭解 syntax。共有多項有效
選項
從數字、顏色到
<custom-ident>敬上
。您也可以使用下列值來修改這些語法
- 附加
+代表可接受以空格分隔的值清單 您就能找到適合的語法舉例來說，<length>+是以空格分隔的清單 長度 - 附加
#代表該函式接受以逗號分隔的值清單 您就能找到適合的語法舉例來說，<color>#會是以半形逗號分隔的清單 顏色 - 在語法或 ID 之間加上
|，代表 都有效。舉例來說，<color># | <url> | magic可允許 以半形逗號分隔的顏色清單、網址或magic字詞。
Gotchas
霍迪尼 Props 和 Vals 出現了兩個問題。首先 您無法更新現有的已註冊資源，而且嘗試 重新註冊屬性會擲回錯誤，指出已已存在
第二，與標準資源不同的是，已註冊的屬性在 模型而會在計算時進行驗證。這意味著 這樣在檢查元素的 有效屬性，即使在有效屬性後加入無效屬性，也不會回復 變成有效狀態；無效資源會退回已註冊的 屬性的預設值。
為自訂屬性加上動畫效果
註冊的自訂資源除了提供檢查外，還提供了其他有趣的獎勵： 可以添加動畫！基本動畫範例如下所示：
<script>
CSS.registerProperty({
name: '--stop-color',
syntax: '<color>',
inherits: false,
initialValue: 'blue',
});
</script>
<style>
button {
--stop-color: red;
transition: --stop-color 1s;
}
button:hover {
--stop-color: green;
}
</style>
將遊標懸停在按鈕上時，動畫就會從紅色變成綠色！不含 要註冊 屬性，它會從一種顏色跳到另一個顏色 瀏覽器無法事先註冊 值和下一個狀態，因此無法保證一定能轉移。 但這個範例可以再進一步，為 CSS 漸層產生動畫！ 以下 CSS 可以使用相同的註冊屬性編寫：
button {
--stop-color: red;
background: linear-gradient(var(--stop-color), black);
transition: --stop-color 1s;
}
button:hover {
--stop-color: green;
}
這會將屬於 linear-gradient 的自訂屬性設為動畫，因此
為線性漸層加上動畫效果請查看下方的「毛刺」瞭解完整程式碼
並親自體驗
結論
Houdini 即將推出瀏覽器， 全新的 CSS 處理和擴充方式套用顏料 API 已出貨 現在，自訂道具和 Vals 的廣告素材工具箱 也擴大了我們的運用範圍 定義型別的 CSS 屬性，並用於製作新奇有趣的 CSS 屬性，並製作動畫 設計。還有更多新功能，敬請期待 Houdini 議題 佇列 瞭解 Houdini 的後續發展Houdini 的用途是開發 解釋網站中的樣式和版面配置 因此，快來看看 善用這些魔法功能