CSS2 で、attr
関数はcontent
プロパティのみが値として使うことの出来る関数とされていました。
Value: normal | none | [ <string> | <uri> | <counter> | attr(<identifier>) | open-quote | close-quote | no-open-quote | no-close-quote ]+ | inherit
参考: Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification - 12.2 The 'content' property
各ブラウザは、この仕様の通りにattr
関数を実装しました。そして現在、 CSS Values and Units Module Level 3 が勧告候補となり、この仕様の中で、attr
関数はすべての CSS プロパティで使用可能になりました。
The attr() function is allowed as a component value in properties applied to an element or pseudo-element.
参考: CSS Values and Units Module Level 3 - §8.2. Attribute References: attr()
このことから、すべての CSS プロパティでattr
関数が使えるようになったのは、仕様上では CSS3 からとわかります。つまり私たちは、attr
関数がすべてのプロパティで使えるようになることを、 10 年近く待っていることになります。なぜこれほどの長い期間、attr
関数がブラウザに実装されないのか、私には推測することしか出来ませんが、以下のような事情が考えられます。
- この機能よりも優先して実装すべき機能が数多く存在する
- 未解決のバグが存在する
いずれにせよ、今は使えない機能なので、少しでも早く実装されることを願い、待つしかありません。代替としては、以下の 2 つの方法が考えられます。
属性セレクタを使う
属性セレクタを使い、各値での CSS プロパティを記述しておくことで、attr
関数と同じようなことができますが、想定外の値への対応が難しく、 CSS の記述量が多くなるため、使えるものではないと思います(動作確認用リンク)。
HTML
1<div data-width="a"></div>
CSS
1div {
2 height: 1.5em;
3}
4
5div[data-width="a"] {
6 background-color: red;
7 width: 2em;
8}
9
10div[data-width="b"] {
11 background-color: green;
12 width: 6em;
13}
14
15div[data-width="c"] {
16 background-color: blue;
17 width: 1em;
18}
JavaScript を使う
こちらについては、既に Polyfill を作ってくれた人がいるようです。ただし、完璧に仕様のとおりに動作するかは保障できません。