grid-area 似乎不适用于 attr 函数，这是设计使然吗？

Question

以下工作：

请注意我什content: attr(class)至如何使用以避免输入标签。整洁的！

section {
  outline: 1px solid red;
  display: grid;
  grid-gap: 10px;
  grid-template-areas: 
		"a1 a1 a1 a1" 
		"a2 a2 a3 a3" 
		"a2 a2 a4 a5" 
		"a6 a6 a6 a6" 
		"a7 a8 a9 a9" 
		"a7 a0 a0 a0";
}
.a1 { grid-area: a1; }
.a2 { grid-area: a2; }
.a3 { grid-area: a3; }
.a4 { grid-area: a4; }
.a5 { grid-area: a5; }
.a6 { grid-area: a6; }
.a7 { grid-area: a7; }
.a8 { grid-area: a8; }
.a9 { grid-area: a9; }
.a0 { grid-area: a0; }
div {
  display: flex;
  outline: 1px dotted green;
}
div:before {
  margin: auto;
  content: attr(class);
}

<section>
	<div class="a1"></div>
	<div class="a2"></div>
	<div class="a3"></div>
	<div class="a4"></div>
	<div class="a5"></div>
	<div class="a6"></div>
	<div class="a7"></div>
	<div class="a8"></div>
	<div class="a9"></div>
	<div class="a0"></div>
</section>

不得不重复那些多余的grid-area声明是一种痛苦。也许我可以在那里使用相同的技巧？

section {
  outline: 1px solid red;
  display: grid;
  grid-gap: 10px;
  grid-template-areas: 
		"a1 a1 a1 a1" 
		"a2 a2 a3 a3" 
		"a2 a2 a4 a5" 
		"a6 a6 a6 a6" 
		"a7 a8 a9 a9" 
		"a7 a0 a0 a0";
}

div {
  display: flex;
  grid-area: attr(class);
  outline: 1px dotted green;
}
div:before {
  margin: auto;
  content: attr(class);
}

<section>
	<div class="a1"></div>
	<div class="a2"></div>
	<div class="a3"></div>
	<div class="a4"></div>
	<div class="a5"></div>
	<div class="a6"></div>
	<div class="a7"></div>
	<div class="a8"></div>
	<div class="a9"></div>
	<div class="a0"></div>
</section>

不！

我已经尝试过使用数据属性或包含单位类型的变化，但仍然没有。那么这里发生了什么。难道attr不与电网的地区设计或工作，这是一个错误？

在 OsX 上最新的 chrome、firefox 和 safari 中测试。都一样。

Answer 1

是的，它是设计attr()使然，实际上只支持content. 如当前规范中所定义，它是 的值content。

你也可以在MDN 中阅读：

注意： attr() 函数可以与任何 CSS 属性一起使用，但对内容以外的属性的支持是实验性的，并且对 type-or-unit 参数的支持很少。

所以它可以与其他属性一起使用，但这仍处于草稿模式

另一种方法是考虑 CSS 变量，您几乎可以编写相同的内容，但content由于它不是字符串，因此无法使用。对于内容，您可以将其替换为计数器：

section {
  outline: 1px solid red;
  display: grid;
  grid-gap: 10px;
  grid-template-areas: 
		"a1 a1 a1 a1" 
		"a2 a2 a3 a3" 
		"a2 a2 a4 a5" 
		"a6 a6 a6 a6" 
		"a7 a8 a9 a9" 
		"a7 a0 a0 a0";
    
  counter-reset:g;
}

div {
  display: flex;
  grid-area: var(--c);
  outline: 1px dotted green;
}
div:before {
  margin: auto;
  counter-increment: g;
  content: "a" counter(g);
}

<section>
	<div style="--c:a1"></div>
	<div style="--c:a2"></div>
	<div style="--c:a3"></div>
	<div style="--c:a4"></div>
	<div style="--c:a5"></div>
	<div style="--c:a6"></div>
	<div style="--c:a7"></div>
	<div style="--c:a8"></div>
	<div style="--c:a9"></div>
	<div style="--c:a0"></div>
</section>