attr()でデフォルト値を設定する

Safari TP 208でattr()のフォールバックをサポートした。

2024年12月現在では、Safari TPとFirefoxでのサポートしている。 Baselineの状況は以下の通り。

CSS Variablesのフォールバックのようにattr(attribute-name[, <fallback>])のように指定できる。

<div class="attr" data-content="データ">data-contentあり</div>
<div class="attr">data-contentなし</div>

.attr::after {
  content: attr(data-content, "デフォルト値");
}

attr()にフォールバックが使えることで、属性駆動スタイリングがやりやすくなる。

デモ