为何flex的order属性使用attr(data-order)会被标记为无效？

问题重现 #

我的HTML代码：

<div class="parent">
  <div class="bdg" data-order="4">1</div>
  <div class="bdg" data-order="3">2</div>
  <div class="bdg" data-order="2">3</div>
  <div class="bdg" data-order="1">4</div>
</div>

尝试用attr()函数设置flex子项的order属性：

.parent { display: flex; }
.bdg { order: attr(data-order number, 5000); }

但Chrome浏览器直接标记为：

⚠️ Invalid property value

我还尝试了以下写法，均无效：

/* 去掉默认值参数 */
.bdg { order: attr(data-order number); }

/* 去掉类型和默认值参数 */
.bdg { order: attr(data-order); }

原因分析 #

核心问题是CSS的attr()函数目前仅在content属性中被主流浏览器完整支持。

虽然CSS规范的扩展提案计划让attr()支持更多属性类型（比如数字、长度等）并可用于order这类非content属性，但该提案尚未被Chrome等主流浏览器实现。对于content以外的属性，浏览器会直接判定attr()写法为无效属性值，无论你是否指定类型或默认值参数。

可行替代方案 #

方案1：使用CSS变量（自定义属性）

通过内联样式将data-order的值注入CSS变量，再在样式中引用变量：

<div class="parent">
  <div class="bdg" style="--order: 4">1</div>
  <div class="bdg" style="--order: 3">2</div>
  <div class="bdg" style="--order: 2">3</div>
  <div class="bdg" style="--order: 1">4</div>
</div>

.parent { display: flex; }
.bdg { order: var(--order, 5000); }

方案2：使用JavaScript动态设置

遍历元素读取data-order属性，直接设置order样式：

document.querySelectorAll('.bdg').forEach(el => {
  el.style.order = el.dataset.order || 5000;
});

内容的提问来源于stack exchange，提问作者wscourge