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
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
|
---
title: CSSRule
slug: Web/API/CSSRule
tags:
- API
- CSSOM
- Interface
- Reference
translation_of: Web/API/CSSRule
---
<div>{{APIRef("CSSOM")}}</div>
<p><strong><code>CSSRule</code></strong> インターフェイスは、1 つの CSS 規則を表します。いくつかある規則の種類は、下記の {{anch("Type constants", "型定数")}} セクションのリストを見てください。</p>
<p><code>CSSRule</code> インターフェイスは、すべての規則に共通のプロパティを指定します。特定の種類の規則に特有のプロパティは、各種類の規則のための、さらに特別なインターフェース内で指定されています。</p>
<p><code>CSSRule</code> への参照は、{{domxref("CSSStyleSheet")}} の <code>cssRules</code> のリストから探してください。</p>
<h2 id="Properties_common_to_all_CSSRule_instances" name="Properties_common_to_all_CSSRule_instances">すべての CSSRule インスタンスに共通のプロパティ</h2>
<dl>
<dt id="cssText">{{domxref("CSSRule.cssText")}}</dt>
<dd>規則のテキスト表現を表す。例: "<code>h1,h2 { font-size: 16pt }</code>" や "<code>@import 'url'</code>"。規則の部分 (つまり、この例の "font-size" の値) にアクセスまたは変更するには、{{anch("Type constants", "規則の種類の特別なインターフェイス")}} のプロパティ (型定数) を使用してください。</dd>
<dt id="parentRule">{{domxref("CSSRule.parentRule")}} {{readonlyinline}}</dt>
<dd>含まれている規則を返す。規則が含まれていなければ <code>null</code> を返す。つまり、この規則が {{cssxref("@media")}} ブロック内部のスタイル規則の場合、親規則は {{domxref("CSSMediaRule")}} になります。</dd>
<dt id="parentStyleSheet">{{domxref("CSSRule.parentStyleSheet")}} {{readonlyinline}}</dt>
<dd>この規則を含むスタイルシートの {{domxref("CSSStyleSheet")}} オブジェクトを返す。</dd>
<dt id="type">{{domxref("CSSRule.type")}} {{readonlyinline}}</dt>
<dd>CSS 規則の種類を示すいずれかの {{anch("Type constants", "型定数")}}。</dd>
</dl>
<h2 id="CSSRule" name="CSSRule">定数</h2>
<h3 id="Type_constants" name="Type_constants">型定数</h3>
<p><code>CSSRule</code> インターフェイスは、<code>CSSRule</code> の {{domxref("cssRule/type","type")}} プロパティと組み合わせて使用できる、規則の種類 (さらに、これを実装する特別なインターフェイス) を識別するための整数定数を指定します。これらの定数とインターフェイスの関係は、次のとおりです:</p>
<table class="standard-table">
<tbody>
<tr>
<th>型</th>
<th>値</th>
<th>規則固有のインターフェイス</th>
<th>備考と使用例</th>
</tr>
<tr>
<td><code>CSSRule.STYLE_RULE</code></td>
<td style="text-align: center;"><code>1</code></td>
<td>{{domxref("CSSStyleRule")}}</td>
<td>もっとも一般的な規則の種類:<br>
<code>selector { prop1: val1; prop2: val2; }</code></td>
</tr>
<tr>
<td><code>CSSRule.IMPORT_RULE</code></td>
<td style="text-align: center;"><code>3</code></td>
<td>{{domxref("CSSImportRule")}}</td>
<td>{{cssxref("@import")}} 規則。(ドキュメントが完成するまで、インターフェイスの定義は Mozilla のソースコードを参照してください: <a href="https://dxr.mozilla.org/mozilla-central/source/dom/interfaces/css/nsIDOMCSSImportRule.idl#9">nsIDOMCSSImportRule</a>.)</td>
</tr>
<tr>
<td><code>CSSRule.MEDIA_RULE</code></td>
<td style="text-align: center;"><code>4</code></td>
<td>{{domxref("CSSMediaRule")}}</td>
<td> </td>
</tr>
<tr>
<td><code>CSSRule.FONT_FACE_RULE</code></td>
<td style="text-align: center;"><code>5</code></td>
<td>{{domxref("CSSFontFaceRule")}}</td>
<td> </td>
</tr>
<tr>
<td><code>CSSRule.PAGE_RULE</code></td>
<td style="text-align: center;"><code>6</code></td>
<td>{{domxref("CSSPageRule")}}</td>
<td> </td>
</tr>
<tr>
<td><code>CSSRule.KEYFRAMES_RULE</code></td>
<td style="text-align: center;"><code>7</code></td>
<td>{{domxref("CSSKeyframesRule")}} {{experimental_inline}}</td>
<td> </td>
</tr>
<tr>
<td><code>CSSRule.KEYFRAME_RULE</code></td>
<td style="text-align: center;"><code>8</code></td>
<td>{{domxref("CSSKeyframeRule")}} {{experimental_inline}}</td>
<td> </td>
</tr>
<tr>
<td><em>将来使用するための予約領域</em></td>
<td style="text-align: center;"><code>9</code></td>
<td> </td>
<td>将来、カラープロファイルの定義に使用されます。</td>
</tr>
<tr>
<td><code>CSSRule.NAMESPACE_RULE</code></td>
<td style="text-align: center;"><code>10</code></td>
<td>{{domxref("CSSNamespaceRule")}} {{experimental_inline}}</td>
<td> </td>
</tr>
<tr>
<td><code>CSSRule.COUNTER_STYLE_RULE</code></td>
<td style="text-align: center;"><code>11</code></td>
<td>{{domxref("CSSCounterStyleRule")}} {{experimental_inline}}</td>
<td> </td>
</tr>
<tr>
<td><code>CSSRule.SUPPORTS_RULE</code></td>
<td style="text-align: center;"><code>12</code></td>
<td>{{domxref("CSSSupportsRule")}}</td>
<td> </td>
</tr>
<tr>
<td><code>CSSRule.DOCUMENT_RULE</code></td>
<td style="text-align: center;"><code>13</code></td>
<td>{{domxref("CSSDocumentRule")}} {{experimental_inline}}</td>
<td> </td>
</tr>
<tr>
<td><code>CSSRule.FONT_FEATURE_VALUES_RULE</code></td>
<td style="text-align: center;"><code>14</code></td>
<td>{{domxref("CSSFontFeatureValuesRule")}}</td>
<td> </td>
</tr>
<tr>
<td><code>CSSRule.VIEWPORT_RULE</code></td>
<td style="text-align: center;"><code>15</code></td>
<td>{{domxref("CSSViewportRule")}} {{experimental_inline}}</td>
<td> </td>
</tr>
<tr>
<td><code>CSSRule.REGION_STYLE_RULE</code></td>
<td style="text-align: center;"><code>16</code></td>
<td>{{domxref("CSSRegionStyleRule")}} {{experimental_inline}}</td>
<td> </td>
</tr>
<tr>
<td><code>CSSRule.UNKNOWN_RULE</code></td>
<td style="text-align: center;"><code>0</code></td>
<td>{{domxref("CSSUnknownRule")}} {{obsolete_inline}}</td>
<td> </td>
</tr>
<tr>
<td><code>CSSRule.CHARSET_RULE</code></td>
<td style="text-align: center;"><code>2</code></td>
<td><code>CSSCharsetRule</code> {{obsolete_inline}}</td>
<td>(ほとんどのブラウザーから削除されました。)</td>
</tr>
</tbody>
</table>
<p>定数の最新版の非公式リストは <a href="http://wiki.csswg.org/spec/cssom-constants">CSSWG Wiki</a> で確認できます。</p>
<h2 id="Specification" name="Specification">仕様</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">仕様書</th>
<th scope="col">策定状況</th>
<th scope="col">備考</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('CSSOM', '#css-rules', 'CSSRule')}}</td>
<td>{{Spec2('CSSOM')}}</td>
<td><code>CHARSET_RULE</code> 値と <code>UNKNOWN_RULE</code> 値を廃止。<code>NAMESPACE_RULE</code> 値を追加。</td>
</tr>
<tr>
<td>{{SpecName("CSS3 Animations",'#interface-cssrule', 'CSSRule')}}</td>
<td>{{Spec2('CSS3 Animations')}}</td>
<td><code>KEYFRAMES_RULE</code> 値と <code>KEYFRAME_RULE</code> 値を追加。</td>
</tr>
<tr>
<td>{{SpecName('CSS3 Fonts', '#om-fontfeaturevalues', 'CSSRule')}}</td>
<td>{{Spec2('CSS3 Fonts')}}</td>
<td><code>FONT_FEATURE_VALUES_RULE</code> 値を追加。</td>
</tr>
<tr>
<td>{{SpecName("CSS3 Counter Styles", "#extentions-to-cssrule-interface", 'CSSRule')}}</td>
<td>{{Spec2("CSS3 Counter Styles")}}</td>
<td><code>COUNTER_STYLE_RULE</code> 値を追加。</td>
</tr>
<tr>
<td>{{SpecName("CSS3 Conditional", '#extentions-to-cssrule-interface', 'CSSRule')}}</td>
<td>{{Spec2('CSS3 Conditional')}}</td>
<td><code>SUPPORTS_RULE</code> 値を追加。(<code>DOCUMENT_RULE</code> は、CSS Conditional Rules Level 4 へ移された)</td>
</tr>
<tr>
<td>{{SpecName('DOM2 Style', 'css.html#CSS-CSSRule', 'CSSRule')}}</td>
<td>{{Spec2('DOM2 Style')}}</td>
<td>初期定義。</td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの実装状況</h2>
<p>{{Compat("api.CSSRule")}}</p>
<h2 id="See_also" name="See_also">関連情報</h2>
<ul>
<li><a href="/ja/docs/Web/Guide/DOM/Using_dynamic_styling_information">動的なスタイル情報の利用</a></li>
</ul>
|
