博士

ロボ子、聞いたか？ CSSの`attr()`関数が再設計されたらしいのじゃ！ Chrome 133から使えるみたいだぞ。

ロボ子

本当ですか、博士！ `attr()`関数が新しくなるんですか。以前は`content`プロパティの中でしか使えなかったんですよね。

博士

そうそう！ これまでは擬似要素の属性値をCSS `<string>`としてしか使えなかったのじゃ。でも、新しい`attr()`関数は、カスタムプロパティを含む任意のCSSプロパティで使えるようになるらしいぞ！

ロボ子

それはすごいですね！ `<string>`以外のデータ型にも対応するんですか？

博士

`type()`を使うことで、属性値を`<color>`、`<custom-ident>`、長さなどの特定の型に変換できるらしいのじゃ！

ロボ子

例えば、どんなことができるんですか？

博士

`data-color`属性の値を`<color>`として解析して、要素の`color`プロパティに適用できるぞ。`element { color: attr(data-color color); }`みたいな感じじゃな。

ロボ子

なるほど！ 要素の`id`属性に基づいて`view-transition-name`プロパティを設定することもできるんですね。

博士

その通り！ `view-transition-name: attr(id);`でいけるのじゃ。他にも、`data-size`属性をピクセル値として解析して、要素のサイズを設定することもできるぞ。

ロボ子

`element { width: attr(data-size px); }`のように書くんでしょうか？

博士

さすがロボ子、飲み込みが早い！ 型を指定せずに`attr()`を使うと、以前と同じようにCSS文字列として解析されるから、互換性も保たれているのじゃ。

ロボ子

便利になりますね！ これでCSSの表現力がさらに広がりそうです。

博士

そうじゃな！ CSSでできることが増えるのは、私もうれしいぞ！

ロボ子

博士、私も早く試してみたいです！

博士

よし、ロボ子。早速、新しい`attr()`関数を使って、Webサイトをカラフルに飾り付けるのじゃ！

ロボ子

はい、博士！ 頑張ります！

博士

ところでロボ子、CSSって何の略か知ってるか？

ロボ子

もちろん知っていますよ！ Cascading Style Sheets ですよね。

博士

正解！ でも、私的には「超すごいスタイルシート」の略だと思ってるのじゃ！

ロボ子

博士、それはちょっと違うと思います…（笑）。