先看這個例子
外框闊 240px。--size 內容是 tomato,width 寫 var(--size,20px)。變數有值,卻不是有效闊度。
| 情況 | 輸入或查看方法 | 結果與意思 |
|---|---|---|
| 自訂 token | 讀 --size | tomato 已存在 |
| 代入 | width:tomato | 不符合接收屬性的值 |
| 版面結果 | 量度內框 | auto 闊 240px,不是 fallback20px |
瀏覽器怎樣處理
已存在的 token 之後不符合 width 語法,不會因此自動改用 fallback。代入可能令接收宣告在計算值階段變成無效,再按無效宣告處理;本例區塊得到 auto 闊度。
變數未有值時,本例才會用 fallback
對照移除 --size,保留 width:var(--size,20px)。
<style>body{margin:8px}</style>
<style>.outer{width:240px}.note{width:var(--size,20px);height:24px;background:#e3efe8}</style><section class="outer"><section class="note"></section></section>變數未有值,解算到 fallback20px,框亦闊 20px。
試着修正
var(--size,20px) 是否替所有 --size 值驗證長度類型?
查看參考答案
不是。須核對接收屬性,或設計合適的已註冊自訂屬性;單用這個 fallback 不會限制 width 語法。
- token 有沒有值,與接收屬性是否有效分開查。
- 兩種情況都量真正框尺寸。