跳至內容
Astera Technology

變數有值但類型不對,fallback 也未必會用

變數未有值,與有值但不適合 width,是兩種情況;fallback 不會一概救回。

代入後闊度無效,本例按 auto 處理,填滿 240px。

下載完整個案資料及參考答案 ↓

先看這個例子

外框闊 240px。--size 內容是 tomato,width 寫 var(--size,20px)。變數有值,卻不是有效闊度。

輸入與瀏覽器原生結果
情況輸入或查看方法結果與意思
自訂 token讀 --sizetomato 已存在
代入width:tomato不符合接收屬性的值
版面結果量度內框auto 闊 240px,不是 fallback20px
下載可編輯 CSV ↓

瀏覽器怎樣處理

已存在的 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 有沒有值,與接收屬性是否有效分開查。
  • 兩種情況都量真正框尺寸。

原始例子檔案

相關資源