曾有那么一陣子，CSS 里的 attr() 就像一杯溫溫的咖啡。

它確實存在。

它只會干一件很具體的小事：在偽元素的 content: 里把屬性值拉出來。結束。

這招屬于那種會在深夜翻規范草案的硬核 CSS 玩家才會用的小把戲。

我們其他人？幾乎沒碰過。

說實話，為什么要碰呢？它在 content 之外基本無用。

想把 attr() 用在顏色？不行。

用在寬度？別想。

任何數值相關？呵呵。它就像一臺只能做“2+2”的計算器。

但現在……一切變了。

attr() 的“技能樹”點滿了

最近的 CSS 更新，把 attr() 從“單項技能”升級成“一整個馬場”。

核心變化：

• attr() 現在可用于任何屬性，不只 content。
• 可以把屬性值強制轉換成 <length>、<color>、<number> 等類型。
• 可以在 attr()內部直接寫后備值（fallback）。

就像 attr() 休學一年去深造，回來能六國語言隨便切換。

示例：

div {
  width: attr(data-width px, 200);
  background-color: attr(data-bg color, lightblue);
}

神奇之處在于：如果該屬性存在，就按你指定的類型解析； 如果沒有？后備值立刻生效。

無需 JavaScript。也不需要那些丑陋的自定義屬性降級黑魔法。 純、正、CSS。

這比你想的更重要

你肯定遇到過這種場景：同一個卡片組件，每個實例想要不同寬度。選項往往是：

1. 為每個尺寸寫一堆類（離譜）。
2. 上行內樣式（不優雅）。
3. 撒一點 JS 只為動態改樣式（何必呢）。

現在？在元素上加個 data-width="350"，剩下讓 CSS 處理。

就這樣。結束。0 行 JS。

HTML 語義保住了； CSS 保持干凈； 你的心理健康也得救了。

這不只是“方便”，而是范式變化：樣式邏輯可以回到它本該在的地方——CSS。

現實情況

attr() 現在完美了嗎？還沒有。

• 瀏覽器支持還不齊（Safari，我在看你）。
• 你仍然要考慮單位與屬性值合法性。
• 生產環境可能需要漸進增強策略。

但與其要一個“弱到用不著”的工具，我更愿意要一個“強但要小心用”的工具。

我已經在這些地方用上了

• 動態尺寸：表格/網格根據屬性自適應。
• 自定義主題：用 data-theme-color 直接驅動 background-color。
• 打印樣式：data-page-size 配置 PDF 尺寸，無需任何 JS 預處理。

最棒的是：

我的 CSS 文件更輕了。再也不需要為一堆邊角情況過度工程化的類，也少了很多“一次性覆蓋”。

收尾

新版 attr() 是那種會迫使你反思舊習的更新。

它不只是一個閃亮的小技巧——它是一種思維方式。 它讓 CSS 再次成為房間里那個成熟的成年人： 在沒有 JS 保姆的情況下，接管樣式邏輯。

如果你還沒用過，從一個組件開始。玩一玩。大膽試錯。你會明白我的意思。

不同意？太好了。歡迎留言。我們就用最文明、最語義化的方式來“辯論”一番。

說真的——這不正是 CSS 好玩的地方嗎？