valueをCSSに使うことはできないのでしょうか？

value（またはデータ属性）をbackground-colorに用いる方法はあるでしょうか？

まず、これはできますよね？

css
1content: attr(value);
2content: attr(data-type);

では、こちらはできないのでしょうか？

css
1background-color: attr(value);
2background-color: attr(data-type);

もしできないとすると、どのような理屈でできないのでしょうか？

教えてください。宜しくお願い致します。

m.ts10806

2019/02/17 13:29

どういうhtmlでどういう結果を得たいのか具体的に書かれたほうが良いかと思います。そうでないと「リファレンス読んで試してみれば良いのでは」くらいの回答しかのぞめないと思います。（もしできないという結論であっても理屈も何も仕様でしかないわけですし）

ikedas

2019/02/17 14:42

前のほうの例は、完全なCSSのコードになっていないとおもうんですが

ikkouenosenpai

2019/02/17 20:15

みなさんご指摘ありがとうございます。

m.ts10806

2019/02/17 21:07

質問編集して追記いただければ良いのですが…

行動規範の内容に同意します

回答2件

ベストアンサー

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}