8000 First draft of the legacy CSSOM side of the API. · w3c/csswg-drafts@d64033e · GitHub
Skip to content

Commit d64033e

Browse files
tabatkinstabatkins
committed
First draft of the legacy CSSOM side of the API.
1 parent 01edafc commit d64033e

2 files changed

Lines changed: 226 additions & 10 deletions

File tree

‎css-variables/Overview.html‎

Lines changed: 139 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -29,21 +29,26 @@
2929
}
3030
</style>
3131

32+
<style>
33+
pre.idl { border:solid thin; background:#eee; color:#000; padding:0.5em }
34+
pre.idl :link, pre.idl :visited { color:inherit; background:transparent }
35+
</style>
36+
3237
<body>
3338
<div class=head> <!--begin-logo-->
3439
<p><a href="http://www.w3.org/"><img alt=W3C height=48
3540
src="http://www.w3.org/Icons/w3c_home" width=72></a> <!--end-logo-->
3641

3742
<h1>CSS Variables Module Level 1</h1>
3843

39-
<h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 29 September
44+
<h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 30 September
4045
2011</h2>
4146

4247
<dl>
4348
<dt>This version:
4449

4550
<dd><a
46-
href="http://www.w3.org/TR/2011/ED-css-variables-20110929/">http://dev.w3.org/csswg/css-variables/</a>
51+
href="http://www.w3.org/TR/2011/ED-css-variables-20110930/">http://dev.w3.org/csswg/css-variables/</a>
4752
<!--<dt>Latest version:
4853
<dd><a href="http://www.w3.org/TR/css-variables/">http://www.w3.org/TR/css-variables/</a>-->
4954

@@ -153,6 +158,23 @@ <h2 class="no-num no-toc" id=contents>Table of contents</h2>
153158
</ul>
154159

155160
<li><a href="#cssom"><span class=secno>4. </span> APIs</a>
161+
<ul class=toc>
162+
<li><a href="#cssom-simple"><span class=secno>4.1. </span> The Simple
163+
API</a>
164+
165+
<li><a href="#cssom-stylesheet"><span class=secno>4.2. </span> Additions
166+
to the Stylesheet Interface</a>
167+
<ul class=toc>
168+
<li><a href="#cssom-cssrule"><span class=secno>4.2.1. </span> Changes
169+
to interface CSSRule</a>
170+
171+
<li><a href="#cssom-cssvariablerule"><span class=secno>4.2.2. </span>
172+
Interface CSSVariableRule</a>
173+
174+
<li><a href="#cssom-cssvariable"><span class=secno>4.2.3. </span>
175+
Interface CSSVariableComponentValue</a>
176+
</ul>
177+
</ul>
156178

157179
<li><a href="#grammar"><span class=secno>5. </span> The Grammar of
158180
Variables</a>
@@ -420,13 +442,109 @@ <h3 id=using-invalid-variables><span class=secno>3.1. </span> Using Invalid
420442

421443
<h2 id=cssom><span class=secno>4. </span> APIs</h2>
422444

423-
<p class=issue>Define the "basic" CSSOM APIs from <a
424-
href="http://disruptive-innovations.com/zoo/cssvariables/#mozTocId847334">Daniel's
425-
and Hyatt's spec</a>.
445+
<p>CSS Variables are mutable - one can change them after they've been
446+
defined, through the CSSOM. This can be done in two ways: one can read the
447+
current variable definition and set an override definition through the
448+
convenient <code>.vars</code> property, or manipulate the definitions in
449+
the stylesheets directly through the standard CSSOM stylesheet interface.
450+
451+
<h3 id=cssom-simple><span class=secno>4.1. </span> The Simple API</h3>
426452

427453
<p class=issue>Define the more convenient CSSOM API from <a
428454
href="http://www.xanthir.com/blog/b4AD0">my blog post</a>.
429455

456+
<h3 id=cssom-stylesheet><span class=secno>4.2. </span> Additions to the
457+
Stylesheet Interface</h3>
458+
459+
<p>This specification extends the IDL definitions in the CSSOM spec <a
460+
href="#CSSOM" rel=biblioentry>[CSSOM]<!--{{!CSSOM}}--></a> in several
461+
ways.
462+
463+
<h4 id=cssom-cssrule><span class=secno>4.2.1. </span> Changes to interface
464+
CSSRule</h4>
465+
466+
<dl>
467+
<dt>IDL Definition
468+
469+
<dd>
470+
<pre class=idl>
471+
interface CSSRule {
472+
473+
// RuleType
474+
const unsigned short UNKNOWN_RULE = 0;
475+
const unsigned short STYLE_RULE = 1;
476+
const unsigned short CHARSET_RULE = 2;
477+
const unsigned short IMPORT_RULE = 3;
478+
const unsigned short MEDIA_RULE = 4;
479+
const unsigned short FONT_FACE_RULE = 5;
480+
const unsigned short PAGE_RULE = 6;
481+
<ins>const unsigned short <a href="#variablerule"><code>VARIABLE_RULE</code></a> = 11;</ins>
482+
readonly attribute unsigned short type;
483+
attribute DOMString cssText;
484+
// raises(DOMException) on setting
485+
readonly attribute CSSStyleSheet parentStyleSheet;
486+
readonly attribute CSSRule parentRule;
487+
};</pre>
488+
489+
<dt>Defined Constants
490+
491+
<dd><dfn id=variablerule><code>VARIABLE_RULE</code></dfn>: The rule is a
492+
<code>CSSVariableRule</code>.
493+
</dl>
494+
495+
<p class=issue>Going with value 11 for now, since CSSOM seems to reserve
496+
0-10.
497+
498+
<h4 id=cssom-cssvariablerule><span class=secno>4.2.2. </span> Interface
499+
CSSVariableRule</h4>
500+
501+
<p>The <code>CSSVariableRule</code> interface represents a &lsquo;<code
502+
class=css>@var</code>&rsquo; rule within a CSS stylesheet. The
503+
&lsquo;<code class=css>@var</code>&rsquo; rule is used to define
504+
variables.
505+
506+
<dl>
507+
<dt>IDL Definition
508+
509+
<dd>
510+
<pre class=idl>
511+
interface CSSVariableRule : CSSRule {
512+
attribute DOMString name;
513+
attribute DOMString value;
514+
}</pre>
515+
</dl>
516+
517+
<h4 id=cssom-cssvariable><span class=secno>4.2.3. </span> Interface
518+
CSSVariableComponentValue</h4>
519+
520+
<p>The CSSVariableComponentValue interface represents a call to a CSS
521+
Variable.
522+
523+
<dl>
524+
<dt>IDL Definition
525+
526+
<dd>
527+
<pre class=idl>
528+
[NoInterfaceObject] interface CSSVariableComponentValue {
529+
attribute DOMString variableName;
530+
readonly attribute any variableValue;
531+
}</pre>
532+
533+
<dt>Attributes
534+
535+
<dd>
536+
<dl>
537+
<dt><code>variableName</code> of type <code>DOMString</code>
538+
539+
<dd>This attribute is used for the name of the variable. Changing this
540+
attribute changes the variable being referred to.
541+
542+
<dt><code>variableValue</code> of type <code>any</code>, readonly
543+
544+
<dd>This attribute is used for the value of the variable.
545+
</dl>
546+
</dl>
547+
430548
<h2 id=grammar><span class=secno>5. </span> The Grammar of Variables</h2>
431549

432550
<p class=issue>I'm not sure if I've done this section correctly. For now,
@@ -668,10 +786,19 @@ <h3 class=no-num id=normative-references>Normative references</h3>
668786
<dt id=CSS21>[CSS21]
669787

670788
<dd>Bert Bos; et al. <a
671-
href="http://www.w3.org/TR/2011/REC-CSS2-20110607"><cite>Cascading Style
789+
href="http://www.w3.org/TR/2011/REC-CSS2-20110607/"><cite>Cascading Style
672790
Sheets Level 2 Revision 1 (CSS&#160;2.1) Specification.</cite></a> 7 June
673791
2011. W3C Recommendation. URL: <a
674-
href="http://www.w3.org/TR/2011/REC-CSS2-20110607">http://www.w3.org/TR/2011/REC-CSS2-20110607</a>
792+
href="http://www.w3.org/TR/2011/REC-CSS2-20110607/">http://www.w3.org/TR/2011/REC-CSS2-20110607/</a>
793+
</dd>
794+
<!---->
795+
796+
<dt id=CSSOM>[CSSOM]
797+
798+
<dd>Anne van Kesteren. <a
799+
href="http://www.w3.org/TR/2011/WD-cssom-20110712/"><cite>CSSOM.</cite></a>
800+
12 July 2011. W3C Working Draft. (Work in progress.) URL: <a
801+
href="http://www.w3.org/TR/2011/WD-cssom-20110712/">http://www.w3.org/TR/2011/WD-cssom-20110712/</a>
675802
</dd>
676803
<!---->
677804

@@ -707,9 +834,9 @@ <h3 class=no-num id=other-references>Other references</h3>
707834
<dt id=CSS3COLOR>[CSS3COLOR]
708835

709836
<dd>Tantek &#199;elik; Chris Lilley; L. David Baron. <a
710-
href="http://www.w3.org/TR/2011/REC-css3-color-20110607"><cite>CSS Color
837+
href="http://www.w3.org/TR/2011/REC-css3-color-20110607/"><cite>CSS Color
711838
Module Level 3.</cite></a> 7 June 2011. W3C Recommendation. URL: <a
712-
href="http://www.w3.org/TR/2011/REC-css3-color-20110607">http://www.w3.org/TR/2011/REC-css3-color-20110607</a>
839+
href="http://www.w3.org/TR/2011/REC-css3-color-20110607/">http://www.w3.org/TR/2011/REC-css3-color-20110607/</a>
713840
</dd>
714841
<!---->
715842
</dl>
@@ -746,6 +873,9 @@ <h2 class=no-num id=index>Index</h2>
746873
<li>as conformance class, <a href="#style-sheet" title="style sheet, as
747874
conformance class"><strong>6.2.</strong></a>
748875
</ul>
876+
877+
<li><a href="#variablerule"><code>VARIABLE_RULE</code></a>, <a
878+
href="#variablerule" title="VARIABLE_RULE"><strong>4.2.1.</strong></a>
749879
</ul>
750880
<!--end-index-->
751881

‎css-variables/Overview.src.html‎

Lines changed: 87 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,10 @@
2323
color: black;
2424
}
2525
</style>
26+
<style>
27+
pre.idl { border:solid thin; background:#eee; color:#000; padding:0.5em }
28+
pre.idl :link, pre.idl :visited { color:inherit; background:transparent }
29+
</style>
2630
</head>
2731

2832
<div class="head">
@@ -192,10 +196,92 @@ <h3 id='using-invalid-variables'>
192196
<h2 id='cssom'>
193197
APIs</h2>
194198

195-
<p class='issue'>Define the "basic" CSSOM APIs from <a href="http://disruptive-innovations.com/zoo/cssvariables/#mozTocId847334">Daniel's and Hyatt's spec</a>.</p>
199+
<p>CSS Variables are mutable - one can change them after they've been defined, through the CSSOM. This can be done in two ways: one can read the current variable definition and set an override definition through the convenient <code>.vars</code> property, or manipulate the definitions in the stylesheets directly through the standard CSSOM stylesheet interface.</p>
200+
201+
<h3 id='cssom-simple'>
202+
The Simple API</h3>
196203

197204
<p class='issue'>Define the more convenient CSSOM API from <a href="http://www.xanthir.com/blog/b4AD0">my blog post</a>.</p>
198205

206+
<h3 id='cssom-stylesheet'>
207+
Additions to the Stylesheet Interface</h3>
208+
209+
<p>This specification extends the IDL definitions in the CSSOM spec [[!CSSOM]] in several ways.</p>
210+
211+
<h4 id='cssom-cssrule'>
212+
Changes to interface CSSRule</h4>
213+
214+
<dl< E445 span class=pl-kos>>
215+
<dt>IDL Definition</dt>
216+
<dd>
217+
<pre class='idl'>
218+
interface CSSRule {
219+
220+
// RuleType
221+
const unsigned short UNKNOWN_RULE = 0;
222+
const unsigned short STYLE_RULE = 1;
223+
const unsigned short CHARSET_RULE = 2;
224+
const unsigned short IMPORT_RULE = 3;
225+
const unsigned short MEDIA_RULE = 4;
226+
const unsigned short FONT_FACE_RULE = 5;
227+
const unsigned short PAGE_RULE = 6;
228+
<ins>const unsigned short <code>VARIABLE_RULE</code> = 11;</ins>
229+
readonly attribute unsigned short type;
230+
attribute DOMString cssText;
231+
// raises(DOMException) on setting
232+
readonly attribute CSSStyleSheet parentStyleSheet;
233+
readonly attribute CSSRule parentRule;
234+
};</pre>
235+
236+
<dt>Defined Constants</dt>
237+
<dd><dfn><code>VARIABLE_RULE</code></dfn>: The rule is a <code>CSSVariableRule</code>.</dd>
238+
</dl>
239+
240+
<p class='issue'>Going with value 11 for now, since CSSOM seems to reserve 0-10.</p>
241+
242+
<h4 id='cssom-cssvariablerule'>
243+
Interface CSSVariableRule</h4>
244+
245+
<p>The <code>CSSVariableRule</code> interface represents a ''@var'' rule within a CSS stylesheet. The ''@var'' rule is used to define variables.</p>
246+
247+
<dl>
248+
<dt>IDL Definition</dt>
249+
<dd>
250+
<pre class='idl'>
251+
interface CSSVariableRule : CSSRule {
252+
attribute DOMString name;
253+
attribute DOMString value;
254+
}</pre>
255+
</dd>
256+
</dl>
257+
258+
<h4 id='cssom-cssvariable'>
259+
Interface CSSVariableComponentValue</h4>
260+
261+
<p>The CSSVariableComponentValue interface represents a call to a CSS Variable.</p>
262+
263+
<dl>
264+
<dt>IDL Definition</dt>
265+
<dd>
266+
<pre class='idl'>
267+
[NoInterfaceObject] interface CSSVariableComponentValue {
268+
attribute DOMString variableName;
269+
readonly attribute any variableValue;
270+
}</pre>
271+
</dd>
272+
273+
<dt>Attributes</dt>
274+
<dd>
275+
<dl>
276+
<dt><code>variableName</code> of type <code>DOMString</code></dt>
277+
<dd>This attribute is used for the name of the variable. Changing this attribute changes the variable being referred to.</dd>
278+
279+
<dt><code>variableValue</code> of type <code>any</code>, readonly</dt>
280+
<dd>This attribute is used for the value of the variable.</dd>
281+
</dl>
282+
</dd>
283+
</dl>
284+
199285

200286
<h2 id='grammar'>
201287
The Grammar of Variables</h2>

0 commit comments

Comments
 (0)