回答編集履歴
3
修正
test
CHANGED
|
@@ -10,7 +10,7 @@
|
|
|
10
10
|
|
|
11
11
|
|
|
12
12
|
|
|
13
|
-
各ブラウザはこの仕様の通りに`attr`関数を実装しました。そして現在、 CSS Values and Units Module Level 3 が勧告候補となり
|
|
13
|
+
各ブラウザは、この仕様の通りに`attr`関数を実装しました。そして現在、 CSS Values and Units Module Level 3 が勧告候補となり、この仕様の中で、`attr`関数は**すべての CSS プロパティで使用可能**になりました。
|
|
14
14
|
|
|
15
15
|
> The attr() function is allowed as a component value in properties applied to an element or pseudo-element.
|
|
16
16
|
|
|
@@ -22,7 +22,7 @@
|
|
|
22
22
|
|
|
23
23
|
|
|
24
24
|
|
|
25
|
-
このことから、すべての CSS プロパティで`attr`関数が使えるようになったのは、仕様上では CSS3 からと
|
|
25
|
+
このことから、すべての CSS プロパティで`attr`関数が使えるようになったのは、仕様上では CSS3 からとわかります。つまり私たちは、`attr`関数がすべてのプロパティで使えるようになることを、 [**10 年近く**](https://www.w3.org/standards/history/css-values-3)待っていることになります。なぜこれほどの長い期間、`attr`関数がブラウザに実装されないのか、私には推測することしか出来ませんが、以下のような事情が考えられます。
|
|
26
26
|
|
|
27
27
|
|
|
28
28
|
|
|
@@ -38,7 +38,7 @@
|
|
|
38
38
|
|
|
39
39
|
## 属性セレクタを使う
|
|
40
40
|
|
|
41
|
-
[属性セレクタ](https://developer.mozilla.org/ja/docs/Web/CSS/Attribute_selectors)を使い、各値での CSS プロパティを記述しておくことで、`attr`関数と同じようなことができますが、想定外の値への対応が難しく、 CSS の記述量が多くな
|
|
41
|
+
[属性セレクタ](https://developer.mozilla.org/ja/docs/Web/CSS/Attribute_selectors)を使い、各値での CSS プロパティを記述しておくことで、`attr`関数と同じようなことができますが、想定外の値への対応が難しく、 CSS の記述量が多くなるため、使えるものではないと思います([動作確認用リンク](https://codepen.io/anon/pen/aXPvZR))。
|
|
42
42
|
|
|
43
43
|
```HTML
|
|
44
44
|
|
2
修正
test
CHANGED
|
@@ -22,7 +22,7 @@
|
|
|
22
22
|
|
|
23
23
|
|
|
24
24
|
|
|
25
|
-
このことから、すべての CSS プロパティで`attr`関数が使えるようになったのは、仕様上では CSS3 からということになります。つまり
|
|
25
|
+
このことから、すべての CSS プロパティで`attr`関数が使えるようになったのは、仕様上では CSS3 からということになります。つまり私たちは、`attr`関数がすべてのプロパティで使えるようになることを、 [**10 年近く**](https://www.w3.org/standards/history/css-values-3)待っていることになります。なぜこれほどの長い期間、`attr`関数がブラウザに実装されないのか、私には推測することしか出来ませんが、以下のような事情が考えられます。
|
|
26
26
|
|
|
27
27
|
|
|
28
28
|
|
1
修正
test
CHANGED
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
|
|
5
5
|
> Value: normal | none | [ <string> | <uri> | <counter> | **attr(<identifier>)** | open-quote | close-quote | no-open-quote | no-close-quote ]+ | inherit
|
|
6
6
|
|
|
7
|
-
|
|
7
|
+
|
|
8
8
|
|
|
9
9
|
参考: [Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification - 12.2 The 'content' property](https://www.w3.org/TR/CSS22/generate.html#content)
|
|
10
10
|
|
|
@@ -22,17 +22,17 @@
|
|
|
22
22
|
|
|
23
23
|
|
|
24
24
|
|
|
25
|
-
このことから、すべての CSS プロパティで`attr`関数が使えるようになったのは、仕様上では CSS3 からということになります。つまり、私たちは`attr`関数がすべてのプロパティで使えるようになることを、 10 年近く待っていることになります。なぜこれほどの長い期間、`attr`関数が
|
|
25
|
+
このことから、すべての CSS プロパティで`attr`関数が使えるようになったのは、仕様上では CSS3 からということになります。つまり、私たちは`attr`関数がすべてのプロパティで使えるようになることを、 [**10 年近く**](https://www.w3.org/standards/history/css-values-3)待っていることになります。なぜこれほどの長い期間、`attr`関数がブラウザに実装されないのか、私には推測することしか出来ませんが、以下のような事情が考えられます。
|
|
26
26
|
|
|
27
27
|
|
|
28
28
|
|
|
29
|
-
- この機能よりも優先して実装すべき機能が
|
|
29
|
+
- この機能よりも優先して実装すべき機能が数多く存在する
|
|
30
30
|
|
|
31
31
|
- 未解決のバグが存在する
|
|
32
32
|
|
|
33
33
|
|
|
34
34
|
|
|
35
|
-
いずれにせよ、今は使えない機能なので、実装されることを願い、待つしかありません。代替としては、以下の 2 つの方法が考えられます。
|
|
35
|
+
いずれにせよ、今は使えない機能なので、少しでも早く実装されることを願い、待つしかありません。代替としては、以下の 2 つの方法が考えられます。
|
|
36
36
|
|
|
37
37
|
|
|
38
38
|
|
|
@@ -88,4 +88,4 @@
|
|
|
88
88
|
|
|
89
89
|
## JavaScript を使う
|
|
90
90
|
|
|
91
|
-
こちらについては、[既に Polyfill を作ってくれた人がいる](https://codepen.io/FWeinb/pen/Dsdkr)ようです。
|
|
91
|
+
こちらについては、[既に Polyfill を作ってくれた人がいる](https://codepen.io/FWeinb/pen/Dsdkr)ようです。ただし、完璧に仕様のとおりに動作するかは保障できません。
|