Skip to content

Commit 616ab4c

Browse files
committed
[css-variables] Remove the CSSVariablesMap.
1 parent 605b0cd commit 616ab4c

2 files changed

Lines changed: 10 additions & 329 deletions

File tree

css-variables/Overview.bs

Lines changed: 2 additions & 156 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,6 @@ Previous Version: http://www.w3.org/TR/2012/WD-css-variables-20120410/
1212
Editor: Tab Atkins Jr., Google, http://xanthir.com/contact
1313
Abstract: This module introduces cascading variables as a new primitive value type that is accepted by all CSS properties, and custom properties for defining them.
1414
Ignored 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
1615
Link Defaults: css-color-3 (property) color, cssom-1 (interface) cssstyledeclaration
1716
</pre>
1817

@@ -604,29 +603,13 @@ AAAAAAA AAAAAAAPPPPPPPPPP IIIIIIIIII
604603
<h2 id='cssom'>
605604
APIs</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'>
632615
Serializing 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

Comments
 (0)