【使うのが待ち遠しい！】attr()関数で style を自在に操る超絶テクニック

記事は上記記事を意訳したものです。

※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。

attr()関数は、HTML属性の値を読み取り、それをCSSで使用できるようにする関数です。マークアップで定義された値をスタイルシート内で使用できます。attr()関数は最も一般的にdata-属性と共に使用されますが、任意のHTML属性にアクセスできます。現在、attr()関数の使用はcontentプロパティに限定されており、::before、::after、::markerで使用でき、文字列値のみに制限されています。

<ul>
  <li data-mark="💥">item 1</li>
  <li data-mark="✨">item 2</li>
  <li data-mark="🦖">item 3</li>
</ul>

li::marker {
  content: attr(data-mark);
}

フォールバック値
文字列以外の値のattr()
インラインスタイルやユーティリティクラスとの比較

フォールバック値

attr()関数はフォールバック値をサポートしています：

h1:before {
  content: attr(data-mark, "✨");
}

これは、HTMLの要素にデータ属性が含まれていない場合のデフォルト値として使用されます。この機能は、Firefox 119、Safari Technology Preview 208、Chrome Canary（フラグの背後）でサポートされています。（Safariは現在::markerのcontentプロパティをサポートしていないため、上記のデモのリスト部分はSafariでは動作しません。）

文字列以外の値の`attr()`

最新のW3C CSS Values and Units仕様では、attr()関数は文字列だけでなく、任意の種類の値を指定でき、content以外のあらゆるCSSプロパティの値として使用できます。

[data-bg] {
  background-color: attr(data-bg type(<color>));
}

<div data-bg="blue"></div>

この機能を試すには、ターミナルから--enable-features=CSSAdvancedAttrFunctionフラグを付けてChrome Canaryを開きます（Chrome 133で出荷予定）。

/Applications/Google\ Chrome\ Canary.app/Contents/MacOS/Google\ Chrome\ Canary --enable-features=CSSAdvancedAttrFunction

この新しい機能をフォールバック値と組み合わせることができます：

div {
  background-color: attr(data-bg type(<color>), pink);
}

データ属性はJavaScriptから簡単に更新できます：

someElement.dataset.bg = "purple";

インラインスタイルやユーティリティクラスとの比較

この機能には開発者から多くの関心が寄せられていますが、次のような疑問があるかもしれません：これはインラインスタイルやユーティリティクラスよりも優れているのか？<div data-bg="blue">は<div class="bg-blue">や<div style="background-color: blue;">よりも優れているのか？