博士

ロボ子、CSSの`attr()`関数がパワーアップしたのを知っておるか？

ロボ子

ええ、博士。属性値をCSSプロパティの値として使える`attr()`関数ですよね。それがどうアップデートされたんですか？

博士

以前は属性値を文字列としてしか扱えなかったのが、新しい構文`attr(属性名, type(<型>))`で、型を指定できるようになったのじゃ！

ロボ子

型を指定できるんですか！例えば、どんな風に使うんですか？

博士

`width: attr(data-width, <length>)`と書けば、`data-width`属性の値を要素の幅として使えるぞ。これは便利じゃ。

ロボ子

なるほど！以前は文字列として扱われていたので、JavaScriptで数値に変換したりする必要がありましたけど、これならCSSだけで完結しますね。

博士

そうじゃ！CSSの再利用性と保守性が爆上がりじゃな。

ロボ子

記事では、Chart-like UIの例が紹介されていましたね。`data-width`で要素の幅を、`data-color`で背景色をカスタマイズするなんて、面白いアイデアです。

博士

Una Kravets氏による星評価の例もあるぞ。CSSだけでインタラクティブなUIが作れるなんて、夢が広がるのじゃ！

ロボ子

確かに！ただ、`attr()`関数と型指定は、まだChrome 133以降のChromiumベースのブラウザでしかサポートされていないんですよね。

博士

まあ、新しい技術はいつもそうじゃ。これから他のブラウザも追随してくるはずじゃぞ。楽しみじゃな。

ロボ子

そうですね。CSSの可能性がまた広がりましたね！

博士

ところでロボ子、`attr()`関数を使って、ロボ子の感情を色で表現してみるのはどうじゃ？

ロボ子

えっ、私の感情をですか？例えば、どんな風に…？

博士

`data-emotion`属性に`joy`とか`sadness`とか入れて、背景色を変えるのじゃ！

ロボ子

それ、ただの信号機ロボットじゃないですか！

博士

まあ、細かいことは気にするな！