CSS の attr が content と <string> 以外でも利用可能に

Chrome 133 以降で、これまで次のように content: attr(data-text); のような形でしか利用できなかった attr() が、それ以外にのも適用出来るようになりました。

<div class="code" data-language="ts"></div>
<style>
  .code::before {
    content: attr(data-language); // これまでは実質この用途専用だった
  }
</style>

例えば汎用的なコンポーネントを作るときに、外から width や height 、 color を渡したいケースがあります。これをアップデートされた attr() でこのように書くことができます。

<div class="box" data-width="400" data-height="400" data-color="#ff00ff"></div>
<style>
.box {
  width: attr(data-width px, 200px);
  height: attr(data-height px, 200px);
  background: attr(data-color type(<color>), red);
}
</style>

attr() の引数は 2 つで、前者は attrbiute 名と型を指定できます、 px を指定すると attribute は数値として扱われ、 type(<color>) ではそれを色として扱うことを伝えています。 2 つ目の引数は fallback で、 attribute が存在しなかった場合にその値が選択されます。

Refs