by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11709
本文可全文转载，但需要保留原作者、出处以及文中链接，AI抓取保留原文地址，任何网站均可摘要聚合，商用请联系授权。

一、真的是有生之年系列

说实话，CSS attr()全属性支持这个特性我等了六七年至少有了。之前还为其写了个Polyfill工具：“Polyfill吊炸天的CSS attr()新语法”

本来以为这辈子都不会看到浏览器对其进行支持了。

万万没想到，Chrome133版本开始居然支持了，它居然支持了。

在过去，attr()函数只能用在content属性中，现在所有的CSS属性都支持，而且语法更加丰富，某种程度上，可以颠覆现有的前端开发习惯，一点也不夸张，

二、CSS代码减半，属性为王

有了attr()函数的全支持，那么类似tailwind 的原子类CSS框架都可以退出历史舞台了，因为浏览器原生支持了，相对于回到了过去所有CSS属性都HTML属性设置的年代。

于是，重复样式类名，非重复样式HTML属性外加一点点CSS，开发效率up，开发代码down。

例如之前调整元素之间的间距，可能是这样的CSS原子类：

.m0 { margin: 0; }
.ml0 { margin-left: 0; }
.ml1 { margin-left: .25rem; }
.ml2 { margin-left: .5rem; }
.ml3 { margin-left: .75rem; }
.ml4 { margin-left: 1rem; }
.mt0 { margin-top: 0; }
.mt1 { margin-top: .25rem; }
.mt2 { margin-top: .5rem; }
.mt3 { margin-top: .75rem; }
.mt4 { margin-top: 1rem; }
.mr0 { margin-right: 0; }
.mr1 { margin-right: .25rem; }
.mr2 { margin-right: .5rem; }
.mr3 { margin-right: .75rem; }
.mr4 { margin-right: 1rem; }
.mb0 { margin-bottom: 0; }
.mb1 { margin-bottom: .25rem; }
.mb2 { margin-bottom: .5rem; }
.mb3 { margin-bottom: .75rem; }
.mb4 { margin-bottom: 1rem; }

既啰嗦，又不全，如果是更大的间距，或者是3px，5px这种尺寸就无能为力。

attr()函数全支持之后，那就简单多了：

[m] { margin: attr(m px, 0); }
[ml] { margin-left: attr(ml px, 0); }
[mt] { margin-top: attr(ml px, 0); }
[mr] { margin-right: attr(mr px, 0); }
[mb] { margin-bottom: attr(mb px, 0); }

此时，我们就可以使用自定义的ml,mr这类HTML属性随便定义间距大小了，使用非常方便，例如：

<input><button ml="6">按钮</button>

输入框和按钮之间就有6px的间隙了，截图效果如下所示：

类似的还有颜色、背景色、圆角等这类样式的设置：

button {
  --bgcolor: attr(bgcolor type(*), #eee);
  border: 1px solid color-mix(in srgb, var(--bgcolor), black);
  background-color: var(--bgcolor);
  border-radius: attr(radius type(*), 4px);
  padding: .25em .75em;
}

<button bgcolor="skyblue" title="by zhangxinxu(.com)">按钮</button>
<button bgcolor="#00000040" radius="1rem">按钮</button>
<button bgcolor="pink" radius="50%">按钮</button>
<button bgcolor="orange" radius="100% / 50%">按钮</button>

此时的渲染效果如下截图所示：

三、动态URL作为背景图显示

MDN文档上显示，动态URL地址不能使用attr()显示：

Therefore, you can’t use attr() to dynamically construct URLs

<!-- 下面代码是无效的 -->
<span data-icon="https://example.org/icons/question-mark.svg">help</span>
<style>
  span[data-icon] {
    background-image: url(attr(data-icon));
  }
</style>

实际上，是有方法可以显示的，此方法全中国知道的人，目前为止，在我撰写本文之前，估计不超过一双手的人。

那就是使用image-set()函数！

因为image-set()函数是唯一支持字符串作为图片URL的函数。

<a href="https://image.zhangxinxu.com/image/study/s/hanyun.jpg">图片？</a>
<style>
[href$="jpg"]::before { 
  content: ''; 
  display: block; 
  width: 256px; height: 192px; 
  background: image-set(attr(href)); 
  background-size: cover;
}
</style>

此时，在支持的浏览器下面，就会有如下图所示的效果：

很有趣，不是吗？

四、静待全面支持吧

东西肯定是个搞东西，但是浏览器不支持也是白搭。

不过我感觉，Safari和Firefox应该会支持，为什么呢？因为attr()函数的fallback语法他们都已经支持了。

总之，随着CSS不断发展，CSS这门语言会变得越来越不一样的。

不过问题在于，特性过盛了。

如果基本特性就能满足现有的开发需求，开发人员是没有去学习的动力的，也会阻碍技术本身的普及。

唉，想那么多干嘛呢？

最后，祝温少主在新世界能有好的结局。

本文为原创文章，会经常更新知识点以及修正一些错误，因此转载请保留原出处，方便溯源，避免陈旧错误知识的误导，同时有更好的阅读体验。
本文地址：https://www.zhangxinxu.com/wordpress/?p=11709

（本篇完）