IT博客汇
  • 首页
  • 精华
  • 技术
  • 设计
  • 资讯
  • 扯淡
  • 权利声明
  • 登录 注册

    震惊,有生之年居然看到CSS attr()全属性支持

    张 鑫旭发表于 2025-05-28 06:19:08
    love 0

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

    css attr全属性支持

    一、真的是有生之年系列

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

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

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

    attr()函数的兼容性

    在过去,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语法他们都已经支持了。

    fallback语法兼容性

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

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

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

    唉,想那么多干嘛呢?

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

    温天仁和侍女

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

    (本篇完)



沪ICP备19023445号-2号
友情链接