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
|
---
title: CSSStyleSheet
slug: Web/API/CSSStyleSheet
tags:
- API
- CSSOM
- NeedsTranslation
- Reference
- TopicStub
translation_of: Web/API/CSSStyleSheet
---
<div>{{APIRef("CSSOM")}}</div>
<p>The <strong><code>CSSStyleSheet</code></strong> interface represents a single <a href="/en-US/docs/Web/CSS">CSS</a> style sheet. It inherits properties and methods from its parent, {{domxref("StyleSheet")}}.</p>
<p>A style sheet consists of <em>{{domxref("CSSRule", "rules", "", 1)}}</em>, such as <em>{{domxref("CSSStyleRule", "style rules", "", 1)}}</em><em> </em>("<code>h1,h2 { font-size: 16pt }"</code>), various <em>at-rules</em> (<code>@import</code>, <code>@media</code>, ...), etc. This interface lets you inspect and modify the list of rules in the stylesheet.</p>
<p>See the {{anch("Notes")}} section for the various ways a CSSStyleSheet object can be obtained.</p>
<h2 id="Properties">Properties</h2>
<p><em>Inherits properties from its parent, {{domxref("StyleSheet")}}.</em></p>
<dl>
<dt id="cssRules">{{domxref("CSSStyleSheet.cssRules")}}</dt>
<dd>Returns a live {{domxref("CSSRuleList")}}, listing the {{domxref("CSSRule")}} objects in the style sheet.<br>
This is normally used to access individual rules like this:<br>
<code> styleSheet.cssRules[i] // where i = 0..cssRules.length-1</code><br>
To add or remove items in <code>cssRules</code>, use the <code>CSSStyleSheet</code>'s <code>deleteRule()</code> and <code>insertRule()</code> methods, described below.</dd>
<dt id="ownerRule">{{domxref("CSSStyleSheet.ownerRule")}}</dt>
<dd>If this style sheet is imported into the document using an {{cssxref("@import")}} rule, the <code>ownerRule</code> property will return that {{domxref("CSSImportRule")}}, otherwise it returns <code>null</code>.</dd>
</dl>
<h2 id="Methods">Methods</h2>
<p><em>Inherits methods from its parent, {{domxref("Stylesheet")}}.</em></p>
<dl>
<dt id="deleteRule">{{domxref("CSSStyleSheet.deleteRule()")}}</dt>
<dd>Deletes a rule at the specified position from the style sheet.</dd>
<dt id="insertRule">{{domxref("CSSStyleSheet.insertRule()")}}</dt>
<dd>Inserts a new rule at the specified position in the style sheet, given the textual representation of the rule.</dd>
</dl>
<h2 id="Notes">Notes</h2>
<p>In some browsers, if a stylesheet is loaded from a different domain, calling <code>cssRules</code> results in <code>SecurityError</code>.</p>
<p>A stylesheet is associated with at most one {{domxref("Document")}}, which it applies to (unless {{domxref("StyleSheet.disabled", "disabled", "", 1)}}). A list of <code>CSSStyleSheet</code> objects for a given document can be obtained using the {{domxref("document.styleSheets")}} property. A specific style sheet can also be accessed from its <em>owner</em> object (<code>Node</code> or <code>CSSImportRule</code>), if any.</p>
<p>A <code>CSSStyleSheet</code> object is created and inserted into the document's <code>styleSheets</code> list automatically by the browser, when a style sheet is loaded for a document. As the {{domxref("document.styleSheets")}} list cannot be modified directly, there's no useful way to create a new <code>CSSStyleSheet</code> object manually (although <a href="http://tabatkins.github.io/specs/construct-stylesheets/">Constructable Stylesheet Objects</a> might get added to the Web APIs at some point). To create a new stylesheet, insert a {{HTMLElement("style")}} or {{HTMLElement("link")}} element into the document.</p>
<p>A (possibly incomplete) list of ways a style sheet can be associated with a document follows:</p>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Reason for the style sheet to be associated with the document</th>
<th scope="col">Appears in <code>document.<br>
styleSheets</code> list</th>
<th scope="col">Getting the owner element/rule given the style sheet object</th>
<th scope="col">The interface for the owner object</th>
<th scope="col">Getting the CSSStyleSheet object from the owner</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{HTMLElement("style")}} and {{HTMLElement("link")}} elements in the document</td>
<td>Yes</td>
<td>{{domxref("StyleSheet.ownerNode", ".ownerNode")}}</td>
<td>{{domxref("HTMLLinkElement")}},<br>
{{domxref("HTMLStyleElement")}},<br>
or {{domxref("SVGStyleElement")}}</td>
<td>{{domxref("LinkStyle.sheet", ".sheet")}}</td>
</tr>
<tr>
<td>CSS {{cssxref("@import")}} rule in other style sheets applied to the document</td>
<td>Yes</td>
<td>{{domxref("CSSStyleSheet.ownerRule", ".ownerRule")}}</td>
<td>{{domxref("CSSImportRule")}}</td>
<td>{{domxref("CSSImportRule.styleSheet", ".styleSheet")}}</td>
</tr>
<tr>
<td><code><?xml-stylesheet ?></code> processing instruction in the (non-HTML) document</td>
<td>Yes</td>
<td>{{domxref("StyleSheet.ownerNode", ".ownerNode")}}</td>
<td>{{domxref("ProcessingInstruction")}}</td>
<td>{{domxref("LinkStyle.sheet", ".sheet")}}</td>
</tr>
<tr>
<td>HTTP Link Header</td>
<td>Yes</td>
<td><em>N/A</em></td>
<td>N/A</td>
<td>N/A</td>
</tr>
<tr>
<td>User agent (default) style sheets</td>
<td>No</td>
<td>N/A</td>
<td>N/A</td>
<td>N/A</td>
</tr>
</tbody>
</table>
<h2 id="Specifications">Specifications</h2>
<table class="standard-table">
<tbody>
<tr>
<th>Specification</th>
<th>Status</th>
<th>Comment</th>
</tr>
<tr>
<td>{{SpecName("CSSOM", "#cssstylesheet", 'CSSStyleSheet')}}</td>
<td>{{Spec2("CSSOM")}}</td>
<td> </td>
</tr>
<tr>
<td>{{SpecName("DOM2 Style", "css.html#CSS-CSSStyleSheet", "CSSStyleSheet")}}</td>
<td>{{Spec2("DOM2 Style")}}</td>
<td>Initial definition</td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility">Browser compatibility</h2>
<p>{{CompatibilityTable}}</p>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Chrome</th>
<th>Edge</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari (WebKit)</th>
</tr>
<tr>
<td>Basic support</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>9.0</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Android</th>
<th>Edge</th>
<th>Firefox Mobile (Gecko)</th>
<th>IE Phone</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td>Basic support</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
</tr>
</tbody>
</table>
</div>
<h2 id="See_also">See also</h2>
<ul>
<li><a href="/en-US/docs/Web/API/CSS_Object_Model/Using_dynamic_styling_information">Using dynamic styling information</a></li>
</ul>
|
