CSS Typed OM 與 Houdini 實戰：用型別化自訂屬性打造進階動畫與主題系統

如果你曾經用 JavaScript 操作 CSS，一定對 element.style.width = '100px' 這種字串操作感到痛苦。字串沒有型別、沒有單位概念、解析效能差——這些問題困擾了前端開發者十幾年。CSS Houdini 的 Typed OM 就是要徹底解決這個問題，而 2026 年正是它真正可以上生產環境的時機。

傳統 CSSOM 的字串困境

傳統的 CSS Object Model（CSSOM）把所有 CSS 值都當作字串處理。你讀出 getComputedStyle(el).width，拿到的是 "247.5px" 這個字串。想做數學運算？先 parseFloat()。想改單位？手動字串拼接。想比較兩個值？祈禱你的 parse 邏輯沒 bug。

更糟的是效能問題。瀏覽器內部用結構化的數據來處理 CSS 值，但每次透過 CSSOM API 存取時，都要先把結構化數據序列化成字串給你，你改完再傳回去，瀏覽器又要反序列化。這個來回轉換在動畫密集的場景下會造成明顯的效能損耗。

CSS Typed OM：告別字串操作

CSS Typed OM（也叫 CSS Typed Object Model Level 1）用 JavaScript 物件來表示 CSS 值，而不是字串。核心概念是把每個 CSS 值包裝成對應的型別類別：

// 傳統 CSSOM（字串操作）
element.style.width = '100px';
const w = getComputedStyle(element).width; // "100px" 字串

// Typed OM（型別化操作）
element.attributeStyleMap.set('width', CSS.px(100));
const typed = element.computedStyleMap().get('width');
// CSSUnitValue { value: 100, unit: 'px' }

// 直接做數學運算
const doubled = CSS.px(typed.value * 2);

// 單位轉換
const inRem = typed.to('rem');

Typed OM 提供了幾種主要的值類型：CSSUnitValue（數值+單位）、CSSMathSum（加法運算）、CSSMathProduct（乘法運算）、CSSKeywordValue（關鍵字如 auto、inherit）等。這些類別都有完整的型別檢查，傳入不合法的值會立即報錯，而不是像字串操作那樣默默失敗。

效能方面，根據 Chrome 團隊的測試，Typed OM 在讀取和設定 CSS 值時比傳統 CSSOM 快約 30%。在高頻率動畫場景下，這個差距會更加明顯。想了解更多原生 CSS 新功能，可以參考CSS 原生自訂函式取代 Sass Mixin 教學。

@property 型別化自訂屬性實戰

CSS 自訂屬性（Custom Properties，也就是 CSS 變數）一直有個限制：瀏覽器把它們都當作「任意字串」處理。這意味著你沒辦法對自訂屬性做動畫——因為瀏覽器不知道 --my-color: #ff0000 是個顏色值，它只看到一串文字。

@property 規則改變了這一切。它讓你正式「註冊」一個自訂屬性，告訴瀏覽器這個屬性的語法、是否繼承、以及初始值：

@property --gradient-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

@property --theme-hue {
  syntax: '<number>';
  inherits: true;
  initial-value: 210;
}

@property --shadow-color {
  syntax: '<color>';
  inherits: false;
  initial-value: rgba(0, 0, 0, 0.2);
}

關鍵在 syntax 屬性。它支援的型別包括：<number>、<integer>、<percentage>、<length>、<color>、<angle>、<time>、<resolution>、<transform-function>、<custom-ident> 等。一旦註冊了型別，瀏覽器就能對這個屬性做平滑的過渡和動畫。

用型別化屬性實現可動畫漸層

這是 @property 最經典的應用場景。正常情況下，CSS 漸層是無法做動畫的——你沒辦法寫 transition: background 來讓漸層平滑變化。但用了型別化自訂屬性之後：

@property --gradient-start {
  syntax: '<color>';
  inherits: false;
  initial-value: #667eea;
}

@property --gradient-end {
  syntax: '<color>';
  inherits: false;
  initial-value: #764ba2;
}

.card {
  background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
  transition: --gradient-start 0.6s ease, --gradient-end 0.6s ease;
}

.card:hover {
  --gradient-start: #f093fb;
  --gradient-end: #f5576c;
}

因為瀏覽器現在知道 --gradient-start 和 --gradient-end 是顏色值，它可以在兩個顏色之間做平滑插值。hover 時漸層會流暢地變換，不再是生硬的跳變。這在以前只能靠 JavaScript 或 CSS 偽元素 hack 才能實現。

同樣的技巧可以用在角度動畫上，做出旋轉的錐形漸層（conic-gradient）背景。搭配CSS @starting-style 入場動畫的技巧，可以打造更豐富的視覺效果。

打造智慧主題切換系統

型別化自訂屬性讓主題系統變得更強大。傳統的 CSS 變數主題切換只能做「離散」的切換（亮到暗瞬間跳變），但有了 @property，你可以讓整個主題的色調平滑過渡：

@property --base-hue {
  syntax: '<number>';
  inherits: true;
  initial-value: 210;
}

:root {
  --base-hue: 210;
  transition: --base-hue 0.8s ease;
}

:root[data-theme="warm"] { --base-hue: 25; }
:root[data-theme="nature"] { --base-hue: 140; }

.primary { color: hsl(var(--base-hue), 70%, 50%); }
.surface { background: hsl(var(--base-hue), 15%, 97%); }

切換主題時，整個頁面的色調會像調色盤一樣平滑旋轉，從藍色系慢慢過渡到暖橘色系。這種效果用傳統方法幾乎不可能實現。搭配 prefers-color-scheme 媒體查詢，還可以整合CSS light-dark() 原生深色模式的功能。

Paint API 基礎：自訂繪圖效果

CSS Houdini 的 Paint API 讓你用 JavaScript Canvas API 的語法來繪製 CSS 背景。差別在於 Paint API 畫出來的東西是 CSS 的一部分，可以自動適應元素尺寸變化、支援 CSS 動畫、甚至可以在 Service Worker 中執行。

// paint-worklet.js
class DotPatternPainter {
  static get inputProperties() {
    return ['--dot-size', '--dot-spacing', '--dot-color'];
  }
  paint(ctx, size, properties) {
    const dotSize = properties.get('--dot-size').value || 4;
    const spacing = properties.get('--dot-spacing').value || 20;
    const color = properties.get('--dot-color').toString() || '#ccc';
    ctx.fillStyle = color;
    for (let x = 0; x < size.width; x += spacing) {
      for (let y = 0; y < size.height; y += spacing) {
        ctx.beginPath();
        ctx.arc(x, y, dotSize / 2, 0, Math.PI * 2);
        ctx.fill();
      }
    }
  }
}
registerPaint('dot-pattern', DotPatternPainter);

目前 Paint API 在 Chrome 系瀏覽器有完整支援，Firefox 仍在開發中。如果你的目標是漸進式增強，可以用 @supports (background: paint(id)) 來偵測支援度。

Properties and Values API 的坑與限制

在實際使用中，有幾個容易踩的坑需要注意：

• syntax 不支援複合型別：每個 @property 只能有一種語法定義。如果需要組合值，要拆成多個屬性。
• initial-value 是必填的：而且必須是符合 syntax 定義的合法值。忘記填或填錯型別，整個 @property 宣告會被忽略，不會有任何錯誤提示。
• inherits 影響效能：設為 true 的屬性會觸發繼承計算，在大型 DOM 樹中可能影響效能。如果屬性只在特定元素使用，設為 false 比較安全。
• JavaScript 與 CSS 宣告的衝突：如果你同時用 CSS.registerProperty() 和 @property 註冊同一個屬性，JavaScript 版本會覆蓋 CSS 版本。建議統一用 CSS @property。
• Safari 的支援差異：Safari 從 15.4 開始支援 @property，但部分進階語法的行為跟 Chrome 不完全一致。務必跨瀏覽器測試。

CSS 自訂函式提案：未來展望

CSS Working Group 正在討論的 CSS Custom Functions 提案如果通過，會讓 @property 的威力再上一個層級。想像一下可以在純 CSS 中定義函式，接受參數、返回計算結果，完全不需要 JavaScript。這個提案目前還在早期階段，但方向是確定的：CSS 正在成為一門更完整的樣式語言，有條件邏輯、有型別系統、有可復用的函式。在此之前，@property 搭配 calc() 和 CSS 巢狀已經能覆蓋大部分需求。

瀏覽器支援度與漸進式採用策略

截至 2026 年初，@property 在所有主流瀏覽器都已支援（Chrome 85+、Firefox 128+、Safari 15.4+）。Typed OM 的支援度稍差，Firefox 部分 API 還在實作中。Paint API 則主要在 Chromium 系瀏覽器可用。

我的建議是從 @property 開始採用，它的瀏覽器支援最好、實用價值最高、風險最低。Typed OM 可以在效能敏感的 JavaScript 動畫中逐步引入。Paint API 則適合作為漸進式增強的視覺效果，不支援的瀏覽器自動降級為靜態背景即可。

CSS Houdini 不是一次性的大改造，而是可以逐步引入的工具箱。從今天開始在專案中用 @property 註冊你的自訂屬性，你會發現很多以前需要 JavaScript 才能做到的效果，現在純 CSS 就能搞定。這不只是語法糖，而是真正改變了前端開發中 CSS 與 JavaScript 的分工界線。