attr()

概要

HTMLの属性値をCSSプロパティの値として直接参照できる強力な関数です。属性値を特定の型（length、color等）として解釈させたり、属性が存在しない場合のデフォルト値を設定できます。現在のところ主要ブラウザでの完全サポートはまだですが、将来的にHTMLとCSSの連携を大幅に強化する機能です。

対応ブラウザ

基本構文

.bar {
  width: attr(data-width length, 100px);
  background: attr(data-color color, gray);
}

実務での使いどころ

• データ属性に基づく動的スタイリング

  HTML の data-* 属性の値をCSSプロパティに直接マッピングし、JavaScriptなしでデータ駆動のスタイル変更を実現できます。

注意点

アクセシビリティ

• attr() で生成されたコンテンツはスクリーンリーダーに読み上げられる場合があります。意味のある情報はHTML側で適切に提供してください。

参考リンク

• MDN Web Docs — attr()
• Can I use — attr()