1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
|
---
title: CSS.registerProperty()
slug: Web/API/CSS/RegisterProperty
tags:
- CSS
- Houdini
- Reference
translation_of: Web/API/CSS/RegisterProperty
---
<div>{{SeeCompatTable}}</div>
<p><strong><code>CSS.registerProperty()</code></strong> メソッドは{{cssxref('--*', 'カスタムプロパティ')}}を登録し、プロパティ型のチェック、デフォルト値、およびそれらの値を継承するまたは継承しないプロパティを許可します。</p>
<p>カスタムプロパティを登録すると、カスタムプロパティの振る舞い（許される型は何か、カスタムプロパティがその値を継承するかどうか、カスタムプロパティのデフォルト値は何か）をブラウザーに指示できます。</p>
<h2 id="Syntax" name="Syntax">構文</h2>
<pre class="syntaxbox notranslate">CSS.registerProperty(<em>PropertyDefinition</em>);</pre>
<h3 id="Parameters" name="Parameters">パラメーター</h3>
<p>次のメンバーを含むことができる <code>PropertyDefinition</code> ディクショナリオブジェクトです。</p>
<dl>
<dt><code>name</code></dt>
<dd>定義しているプロパティの名前を示す <code><a href="/ja/docs/Web/API/DOMString">DOMString</a></code>。</dd>
<dt><code>syntax</code> {{optional_inline}}</dt>
<dd>定義されたプロパティの期待される構文を表す <code><a href="/ja/docs/Web/API/DOMString">DOMString</a></code>。 デフォルトは <code>"*"</code> です。</dd>
<dt><code>inherits</code></dt>
<dd>定義されたプロパティを継承する必要があるか（<code>true</code>）、否か（<code>false</code>）を定義するブール値。 デフォルトは <code>false</code> です。</dd>
<dt><code>initialValue</code> {{optional_inline}}</dt>
<dd>定義されたプロパティの初期値を表す <code><a href="/ja/docs/Web/API/DOMString">DOMString</a></code>。</dd>
</dl>
<h3 id="Return_value" name="Return_value">戻り値</h3>
<p><code>undefined</code>。</p>
<dl>
</dl>
<h3 id="Exceptions" name="Exceptions">例外</h3>
<dl>
<dt><code>InvalidModificationError</code></dt>
<dd>指定された <code>name</code> はすでに登録されています。</dd>
<dt><code>SyntaxError</code></dt>
<dd>指定された <code>name</code> は（<code>--foo</code> のように、2つのダッシュで始まる）有効なカスタムプロパティ名ではありません。</dd>
<dt><code>TypeError</code></dt>
<dd>必要なディクショナリメンバーの <code>name</code> または <code>inherits</code>、あるいはその両方が指定されていません。</dd>
</dl>
<h2 id="Examples" name="Examples">例</h2>
<p>次の例では、<code>registerProperty()</code> を使用して{{cssxref('--*', 'カスタムプロパティ')}} <code>--my-color</code> を色として登録し、デフォルト値を指定して、その値を継承しません。</p>
<pre class="brush: js notranslate">window.CSS.registerProperty({
name: '--my-color',
syntax: '<color>',
inherits: false,
initialValue: '#c0ffee',
});
</pre>
<p>この例では、カスタムプロパティ <code>--my-color</code> が構文 <code><color></code> を使用して登録されています。 これで、このプロパティを使用して、ホバーまたはフォーカスでグラデーションを遷移（transition）できます。 登録されたプロパティでは遷移が機能しますが、未登録のプロパティでは機能しないことに注意してください！</p>
<pre class="brush: css notranslate">.registered {
--my-color: #c0ffee;
background-image: linear-gradient(to right, #fff, var(--my-color));
transition: --my-color 1s ease-in-out;
}
.registered:hover,
.registered:focus {
--my-color: #b4d455;
}
.unregistered {
--unregistered: #c0ffee;
background-image: linear-gradient(to right, #fff, var(--unregistered));
transition: --unregistered 1s ease-in-out;
}
.unregistered:hover,
.unregistered:focus {
--unregistered: #b4d455;
}
button {
font-size: 3vw;
}</pre>
<p>これらのスタイルをいくつかのボタンに追加できます。</p>
<pre class="brush: html notranslate"><button class="registered">Background Registered</button>
<button class="unregistered">Background Not Registered</button>
</pre>
<p>{{EmbedLiveSample("Examples", 320, 320)}}</p>
<h2 id="Specifications" name="Specifications">仕様</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">仕様</th>
<th scope="col">状態</th>
<th scope="col">コメント</th>
</tr>
<tr>
<td>{{SpecName('CSS Properties and Values API', '#the-registerproperty-function', 'The registerProperty() function')}}</td>
<td>{{Spec2('CSS Properties and Values API')}}</td>
<td>初期定義</td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
<p>{{Compat("api.CSS.registerProperty", 1)}}</p>
<h2 id="See_also" name="See_also">関連情報</h2>
<ul>
<li><a href="/ja/docs/Web/API/CSS_Properties_and_Values_API/guide">CSS properties and values API の使用</a></li>
<li>{{DOMxRef("CSS")}}</li>
<li>{{DOMxRef("CSS.supports()")}}</li>
<li>{{DOMxRef("CSS.escape()")}}</li>
<li>{{DOMxRef("CSS.factory_functions", 'CSS ファクトリー関数')}}</li>
</ul>
<dl>
</dl>
|
