@@ -12,7 +12,6 @@ Previous Version: http://www.w3.org/TR/2012/WD-css-variables-20120410/
1212Editor : Tab Atkins Jr., Google, http://xanthir.com/contact
1313Abstract : This module introduces cascading variables as a new primitive value type that is accepted by all CSS properties, and custom properties for defining them.
1414Ignored Terms : --0, --foo, --main-color, --Bar, --two, --header-color, --accent-background, --foo-bar, --bar, --one, var, <ident>, declarations, case-insensitive, getproperty()
15- At Risk : the <a interface>CSSVariablesMap</a> interface
1615Link Defaults : css-color-3 (property) color, cssom-1 (interface) cssstyledeclaration
1716</pre>
1817
@@ -604,29 +603,13 @@ AAAAAAA AAAAAAAPPPPPPPPPP IIIIIIIIII
604603<h2 id='cssom'>
605604APIs</h2>
606605
607- <h3 id='the-cssstyledeclaration-interface'>
608- Extensions to the <code>CSSStyleDeclaration</code> Interface</h3>
609-
610- The <dfn><code>CSSStyleDeclaration</code></dfn> interface is amended as follows:
611-
612- <pre class='idl'>
613- partial interface CSSStyleDeclaration {
614- readonly attribute CSSVariablesMap var;
615- };
616- </pre>
617-
618- A <code> CSSStyleDeclaration</code> is the <dfn>associated style declaration</dfn>
619- for the <code> CSSVariablesMap</code> assigned to its <code> var</code> attribute.
620-
621606 All <a>custom property</a> <a>declarations</a> have the <a>case-insensitive</a> flag set.
622607
623608 Note: Custom properties do not appear on a CSSStyleDeclaration object in camel-cased form,
624609 because their names may have both upper and lower case letters
625610 which indicate distinct custom properties.
626611 The sort of text transformation that automatic camel-casing performs is incompatible with this.
627- They can still be accessed by their proper name via <a method>getProperty()</a> /etc,
628- or by the <a interface>CSSVariablesMap</a> interface defined below.
629-
612+ They can still be accessed by their proper name via <a method>getProperty()</a> /etc.
630613
631614<h4 id='serializing-custom-props'>
632615Serializing Custom Properties</h4>
@@ -637,147 +620,10 @@ Serializing Custom Properties</h4>
637620 Ordinarily, property names are restricted to the ASCII range and are case-insensitive,
638621 so implementations typically serialize the name lowercased.
639622
640- <h3 id='the-CSSVariablesMap-interface'>
641- The <code>CSSVariablesMap</code> Interface</h3>
642-
643- The <dfn><code>CSSVariablesMap</code></dfn> interface
644- exposes the <a>custom properties</a> declared in the parent declaration block
645- that have a non-initial value.
646-
647- <pre class='idl'>
648- [MapClass(DOMString, DOMString)]
649- interface CSSVariablesMap {
650- DOMString get(DOMString varName);
651- boolean has(DOMString varName);
652- CSSVariablesMap set(DOMString varName, DOMString varValue);
653- boolean delete(DOMString varName);
654- };
655- </pre>
656-
657- The <a href="http://dev.w3.org/2006/webapi/WebIDL/#MapClass">map entries</a>
658- on a CSSVariablesMap object
659- are the property names of all the <a>custom properties</a> in the <a href="http://dev.w3.org/csswg/cssom/#css-declaration-block-declarations">CSS declaration block declarations</a>
660- with a non-initial value,
661- with the "--" prefix removed,
662- paired with their values.
663-
664- <h4 id='cssvariablesmap-methods'>
665- <code>CSSVariablesMap Methods</code></h4>
666-
667- <dl>
668- <dt> get(DOMString varName), returns DOMString
669- <dd>
670- Prepend "--" to <var> varName</var> .
671- Invoke <code> getPropertyValue()</code>
672- on the <a>associated style declaration</a>
673- by passing <var> varName</var> as its argument,
674- and return its returned value.
675-
676- <dt> has(DOMString varName), returns boolean
677- <dd>
678- Invoke get() on the CSSVariablesMap object
679- by passing <var> varName</var> as its argument.
680- If the return value is the empty string,
681- return <code> false</code> ;
682- otherwise, return <code> true</code> .
683-
684- <dt> set(DOMString varName, DOMString varValue), returns void
685- <dd>
686- Prepend "--" to <var> varName</var> .
687- Invoke <code> setProperty()</code>
688- on the <a>associated style declaration</a>
689- by passing <var> varName</var> and <var> varValue</var> as its two arguments, in that order.
690- Return the CSSVariablesMap object on which the method was called.
691-
692- <dt> delete(DOMString varName), return boolean
693- <dd>
694- Prepend "--" to <var> varName</var> .
695- Invoke <code> removeProperty()</code>
696- on the <a>associated style declaration</a>
697- by passing <var> varName</var> as its argument.
698- If the returned value is the empty string,
699- return <code> false</code> ;
700- otherwise, return <code> true</code> .
701- </dl>
702-
703- <div class='example'>
704- <style scoped>
705- #--code-examples td { padding: 2px; }
706- #--code-examples code { background: rgba(0,0,0,.05); display: inline-block; padding: 1px 2px; white-space: pre; }
707- </style>
708-
709- For example,
710- given the following style sheet:
711-
712- <pre>
713- div {
714- --foo: 16px;
715- --Bar: red;
716- --foo-bar: 50%;
717- }
718- </pre>
719-
720- Here are the results of several JavaScript expressions,
721- assuming that <code> el</code> is a JavaScript variable
722- holding an element that the above style rule applies to:
723-
724- <table id="--code-examples">
725- <thead>
726- <tr>
727- <th> Code
728- <th> Value
729- <th> Notes
730- <tbody>
731- <tr>
732- <td><code> el.style.var.get("foo")</code>
733- <td><code> "16px"</code>
734- <td> The value of '--foo' .
735- <tr>
736- <td><code> el.style.var.get("Bar")</code>
737- <td><code> "red"</code>
738- <td> The value of '--Bar' .
739- <tr>
740- <td><code> el.style.var.get("foo-bar")</code>
741- <td><code> "50%"</code>
742- <td> The value of '--foo-bar' .
743- <tr>
744- <td><code> el.style.varFoo</code>
745- <td> n/a
746- <td> Custom properties don't exist directly on "style"
747- <tr>
748- <td><code> el.style.varBar</code>
749- <td> n/a
750- <td> Not even if the casing matches.
751- </table>
752- </div>
753-
754- <div class='example'>
755- Iterating over all of the custom properties
756- (for example, for a JS library to find the ones it knows about and wants to respond to)
757- is also simple with the <code> var</code> property:
758-
759- <pre>
760- var customProps = el.style.var;
761- customProps.forEach(function(propValue, propName) {
762- if( knownCustomPropName(propName) ) {
763- /* Processing code here. */
764- }
765- });
766- </pre>
767- </div>
768623
769624
770625<h2 id='changes'>
771- Changes from 10 April 2012 Working Draft</h2>
772-
773- <ul>
774- <li> The value syntax for custom properties has been nailed down more precisely.
775- <li> Case-sensitivity of custom property names has been defined.
776- <li> The fallback argument was added to the var() function.
777- <li> A property that is invalid at computed-value time now either goes inherit or initial, rather than always initial.
778- <li> CSSVariableComponentValue interface has been dropped, pending the *ComponentValue interfaces being created at all.
779- <li> The CSSVariablesMap interface has been added, which stores all the variables defined by a style rule.
780- </ul>
626+ Changes</h2>
781627
782628
783629<h2 id="acks">
0 commit comments