原子化的未來？了解一下全面進化的CSS attr函數
CSS attr函數相信大家都用過了吧，通常會配合偽元素content動態生成內容，比如一個簡易的tooltip。
<span class="css-tips" data-title="我是tooltip" >提示上</span>通過attr動態生成
.css-tips[data-title]:after {
content: attr(data-title);
/*...*/
}效果如下：
image-20250516200454818
你可以訪問這個鏈接查看完整demo: https://codepen.io/xboxyan/pen/MLJjWQ
不過，之前僅僅支持字符串形式，對于數字、顏色等都無法識別，例如
<div w="10"></div>
<style>
div{
width: attr(w) /**不生效/
}
</style>現在，CSS attr迎來了全面進化（chrome 133+），很多問題都得到了很好的解決，一起看看吧~
一、快速上手
比如這樣一個結構，是不是看著有些眼熟？
<div w="100" h="100"></div>
<style>
div{
background: royalblue;
}
</style>那么，如何讓屬性上的尺寸傳遞應用到實際的寬高上呢？你可以這樣
[w]{
width: attr(w px)
}
[h]{
height: attr(h px)
}來看看效果：
image-20250516170508419
我們可以用之前的規則，將尺寸通過content顯示出來
div:before{
content: attr(w) '*' attr(h);
color: white;
font-size: 14px;
}效果如下：
image-20250516170636866
更為關鍵的是，這些完全是自動獲取的，你可以設置多個任意尺寸
<div w="100" h="100"></div>
<div w="200" h="100"></div>
<div w="300" h="100"></div>效果如下：
image-20250516170814615
是不是非常靈活？
二、語法詳解
現在來看看語法規則
attr(<attr-name> <attr-type>? , <fallback-value>?)其實相比之前的規則，多了兩個可選參數，一個是attr-type，表示屬性類型，完整類型可以參考
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Values_and_Units/CSS_data_types
還有一個是allback-value，表示回退值，一些寫法如下
/* Basic usage */
attr(data-count)
attr(href)
/* With type */
attr(data-width px)
attr(data-size rem)
attr(data-name raw-string)
attr(id type(<custom-ident>))
attr(data-count type(<number>))
attr(data-size type(<length> | <percentage>))
/* With fallback */
attr(data-count type(<number>), 0)
attr(data-width px, inherit)
attr(data-something, "default")前面的例子其實帶類型的值，除了使用px，還可以使用任何已有的CSS單位，比如
<div w="100" h="100" rotate="45"></div>這里定義了一個旋轉角度，可以直接加上角度單位deg
[rotate]{
rotate: attr(rotate deg)
}效果如下：
image-20250516172610893
但是，有些值其實是不帶單位的，比如顏色，并沒有什么后綴單位，比如
<div w="100" h="100" rotate="45" bg="red"></div>這時，可以采用type來手動指定
[bg]{
background: attr(bg type(<color>));
}效果如下：
image-20250516181308281
有些屬性可能不止一種類型，比如background，支持顏色，也支持漸變，還支持圖像，這里其實也能定義多種類型
[bg]{
background: attr(bg type(<color>|<image>));
}我們換成漸變試試：
<div w="100" h="100" rotate="45" bg="linear-gradient(orange,red)"></div>也能完美適配
image-20250516182249509
多個值寫起來可能比較麻煩，可以用「通配符」來代替，相當于傳入什么，讀取的就是什么
[bg]{
background: attr(bg type(*));
}最后就是回退值，非常類CSS變量，當屬性不存在時（注意不能是空），采用回退值，比如
div{
background: attr(bg type(*), royalblue);
}現在去除bg屬性
<div w="100" h="100" rotate="45"></div>就回到了默認的寶藍色
image-20250516183003948
你也可以訪問在線demo真實體驗： https://codepen.io/xboxyan/pen/dPPremp
三、帶數字顯示的進度條
下面來看一個案例：
image-20250516185648485
在過去，如果想用單個標簽、單一變量來實現，通常會用到CSS變量，就像這樣
<div class="progress" style="--value:30"></div>
<div class="progress" style="--value:42.5"></div>
<div class="progress" style="--value:50"></div>
<div class="progress" style="--value:90"></div>進度很好辦，直接用這個變量計算就好了，那后面的數字怎么辦呢？直接使用變量是不行的
::before{
content: var(--value) /*不生效*/
}其實可以用計數器來實現，類似于這樣
.progress::before {
--value: 50;
counter-reset: progress var(--value);
content: counter(value);
}有興趣可以查看張老師的這篇文章: 小tips: 如何借助content屬性顯示CSS var變量值[1]
不過計數器在正常場景下不支持小數，導致有些場景受限
如果需要展示小數可以參考這篇文章： 如何讓CSS計數器支持小數的動態變化？[2]
現在有了attr，可以直接用屬性來實現，實現更方便
<div class="progress" value="30"></div>
<div class="progress" value="42.5"></div>
<div class="progress" value="50"></div>
<div class="progress" value="90"></div>直接通過漸變繪制進度attr(value %)
.progress {
color: royalblue;
width: 300px;
height: 20px;
background: linear-gradient(currentColor, currentColor) 0 0 / attr(value %) 100% no-repeat #ccc;
border-radius: 2px;
position: relative;
}
.progress::after {
content: attr(value);
position: absolute;
top: 50%;
left: 100%;
transform: translate(10px, -50%);
font-size: 20px;
}你也可以訪問在線demo真實體驗：https://codepen.io/xboxyan/pen/JoozZry
四、原子化的未來？
回頭再來看看這種寫法，是不是非常類似現在流行的原子化CSS？
<div w="100" h="100"></div>
<div w="200" h="100"></div>
<div w="300" h="100"></div>嗯...等到兼容性沒有問題后，現在的原子化框架都得革新了 ，只需要極少部分原子CSS即可適配大量的樣式，而不是這樣生成大量用到的樣式
image-20250516195921515
用attr可能就兩行，類似這樣
[fs]{
font-size: attr(fs type(<length>))
}
p{
padding: attr(p type(*))
}是不是可以節省大量CSS代碼？
五、優勢和局限
其實很多特性和CSS變量還是比較相似，不過相比而言還是有不少優勢的
- 支持content內容生成
- html結構更直觀，個人覺得CSS變量放在style上有些冗余
- 天然原子化，比現在框架生成要高效的多
然后有一個局限性，那就是不支持鏈接格式，比如
<div src="xxx.png"></div>如果直接這樣使用，是不會生效的
div{
background: url(attr(src)); /*無效*/
}只能用這種形式，其實和現在CSS變量差不多了
<div src="url(xxx.png)"></div>官方說明是為了安全考慮，不能用于動態構造 URL
??太可惜了，一直想用這個功能能實現自定義 img 標簽，將圖片轉成背景圖片，這樣就能做更多事情了
<img src="xxx.png">
<style>
img{
background: url(attr(src));
}
</style>
