はじめに
こんにちは！😄
みなさん、Chrome133で再設計されたattr()を使用されたことはありますか？
私は「なんか便利になったらしいけど、なにがどう便利なの？」と思い、実際に色々と調べてみると、「これいいやん！！」となったので今回ご紹介します！
そもそも従来のattr()はどう使われていたのか？
まず、従来のattr()はどのように使われていたのかを説明します。
attr()を使用するとHTML属性を取得して、それをcontentプロパティに付与することができます。例えば以下のようなイメージです。
<a href="https://www.google.co.jp/">リンク</a>
a:after {
content: "[ " attr(href) " ]";
}
上記のようにHTML上のhref属性を取得し、それをcontentプロパティに付与しています。attr()は contentプロパティでしか使用できなかったため、主に擬似要素 :beforeや:afterで、HTMLの属性値を表示したいときなどに使用されていました。
attr()がどう変わったのか？
それでは本題です。Chrome133よりattr()は contentプロパティだけではなく、カスタムプロパティを含む任意のCSSプロパティで使用することができるようになりました！
簡単に例でご紹介します。
<div data-color="red">Hello World</div>
<div data-color="green">Hello World</div>
<div>Hello World</div>
div {
color: attr(data-color type(<color>), pink);
}
それぞれHTMLのdata-colorでカラーを指定します。そしてcolor: attr(data-color type(<color>), pink);でdata-colorがあれば指定したカラーを設定し、data-colorがなければpinkが設定されるようになっています。
つまり、HTMLの属性からスタイルを生成できるということです！これまでは動的なスタイルを適用するにはタグに直書きするかCSSカスタムプロパティを使用したりしていましたが、attr()を使用することで個別にスタイルを生成できます。
これはめちゃくちゃ嬉しいですね！！🔥
実際に何か作ってみる
以下のようなグラデーションしているBadgeをattr()を使って作成しました。
<div data-start="yellow" data-end="green" data-dir="80deg">Badge</div>
<div data-start="red" data-end="blue" data-dir="0deg">Badge</div>
<div>Badge</div>
div {
width: 200px;
text-align: center;
padding: 10px;
border-radius: 8px;
color: #fff;
background: linear-gradient(
attr(data-dir type(<angle>), 90deg),
attr(data-start type(<color>), gray),
attr(data-end type(<color>), black)
);
}
コードもめちゃくちゃシンプルになりました！！
attr()が便利すぎるがゆえに気をつけないといけないこと
attr()が便利すぎるが故に、なんでもかんでもHTMLに属性を付与しないように気をつけないといけないなと思いました。例えば以下のコードです。
<div
data-width="200"
data-height="100"
data-display="block"
data-margin="20px"
data-padding="10px"
data-bgcolor="lightblue"
>
Bad
</div>
div {
width: attr(data-width px);
height: attr(data-height px);
display: attr(data-display);
margin: attr(data-margin);
padding: attr(data-padding);
background-color: attr(data-bgcolor);
}
以下のようなデメリットがあると思います。
- HTMLが無駄に肥大化し、可読性が落ちる(メンテナンス性も下がる)
- CSSの「カスケード」や「セレクタの設計」の利点が失われる
attr()は、あくまで「必要な部分だけ」に使うということを意識する必要があります。
最後に
再設計されたattr()は、CSS設計も大きく変わってくるようなバージョンアップなのかなと思います。このようなCSSの進化により、JavaScriptを使わずに実現可能な場面が増えてきそうです。
またattr()は数値を扱うこともできるので、calc()と組み合わせて計算をCSSに寄せることも可能です。以下のサイトでattr()+calc()のパターンを使っているのでぜひご覧ください。
最後までご覧いただきありがとうございました！！
Discussion