Skip to content

Commit 9bd082f

Browse files
tabatkinstabatkins
committed
[css-extensions] Add custom properties.
1 parent 5424b82 commit 9bd082f

2 files changed

Lines changed: 139 additions & 9 deletions

File tree

‎css-extensions/Overview.bs‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -107,6 +107,51 @@ CSSOM</h3>
107107
<p class='issue'>
108108
Fill in.
109109

110+
<h2 id='custom-property'>
111+
Custom Properties</h2>
112+
113+
<div class='issue'>
114+
Need to more fully support Custom Properties
115+
(and eventually remove them from the variable spec entirely, since they'll be defined here).
116+
117+
By default, custom properties are optimized for use as ''var()'' values--
118+
they inherit,
119+
have an empty initial value,
120+
don't do any syntax checking,
121+
and don't animate.
122+
All of these should be adjustable somehow.
123+
124+
<pre>
125+
@custom-property --foo {
126+
scope: [ inherit | local ];
127+
initial: <<any-value>>*;
128+
value: <<length>> <<length>> <<color>>;
129+
/* Literally, define a simplistic definition syntax.
130+
OR FULL CSS PROPERTY GRAMMAR?!? */
131+
}
132+
</pre>
133+
134+
If you provide a "value" field with animatable types,
135+
we can animate in the most direct fashion automatically.
136+
We could also let you hook into that:
137+
you register a callback,
138+
and whenever a property starts animating,
139+
we call it with the starting and ending values.
140+
You have to return a function which takes a progress value (between 0 and 1)
141+
and returns a value for your property;
142+
we'll call it as we animate the value.
143+
(How can we hook into Web Anim here? Can you just return an Animation object?)
144+
145+
Do we need a hook for computed values? Interesting.
146+
We could just hand your callback a set of property values for the element and its parent (maybe siblings, if you ask for it?),
147+
and you can return a new value for the property.
148+
This is probably an advanced feature for a later date.
149+
150+
Definitely need a way to listen for elements receiving and changing property values,
151+
so you can efficiently polyfill things and make your own properties.
152+
Unsure how it would look at the moment.
153+
</div>
154+
110155
<h2 id='custom-functions'>
111156
Custom Functions</h2>
112157

@@ -150,6 +195,7 @@ Custom Functions</h2>
150195

151196
How much can we do in pure CSS?
152197
Being able to substitute values depending on MQs or support queries would be useful.
198+
(However, we can do that much just by using custom properties and ''var()''.)
153199
To get *real* use out of it, though, I suspect we'd need fuller support for conditionals,
154200
likely in the form of SASS's ''@if'' or something similar.
155201
</div>

‎css-extensions/Overview.html‎

Lines changed: 93 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@
5454
</p>
5555
<h1 class="p-name no-ref" id=title>CSS Extensions</h1>
5656
<h2 class="no-num no-toc no-ref heading settled heading" id=subtitle><span class=content>Editor’s Draft,
57-
<span class=dt-updated><span class=value-title title=20140411>11 April 2014</span></span></span></h2>
57+
<span class=dt-updated><span class=value-title title=20140412>12 April 2014</span></span></span></h2>
5858
<div data-fill-with=spec-metadata><dl><dt>This version:<dd><a class=u-url href=http://dev.w3.org/csswg/css-extensions>http://dev.w3.org/csswg/css-extensions</a><dt>Editor’s Draft:<dd><a href=http://dev.w3.org/csswg/css-extensions>http://dev.w3.org/csswg/css-extensions</a>
5959
<dt>Feedback:</dt>
6060
<dd><a href="mailto:www-style@w3.org?subject=%5Bcss-extensions%5D%20feedback">www-style@w3.org</a>
@@ -112,9 +112,10 @@ <h2 class="no-num no-toc no-ref heading settled heading" id=contents><span class
112112
<ul class=toc>
113113
<li><a href=#script-custom-selectors><span class=secno>3.1</span> Script-based Custom Selectors</a>
114114
<li><a href=#custom-selectors-cssom><span class=secno>3.2</span> CSSOM</a></ul>
115-
<li><a href=#custom-functions><span class=secno>4</span> Custom Functions</a>
116-
<li><a href=#custom-combinators><span class=secno>5</span> Custom Selector Combinators</a>
117-
<li><a href=#custom-atrules><span class=secno>6</span> Custom At-Rules</a>
115+
<li><a href=#custom-property><span class=secno>4</span> Custom Properties</a>
116+
<li><a href=#custom-functions><span class=secno>5</span> Custom Functions</a>
117+
<li><a href=#custom-combinators><span class=secno>6</span> Custom Selector Combinators</a>
118+
<li><a href=#custom-atrules><span class=secno>7</span> Custom At-Rules</a>
118119
<li><a href=#conformance><span class=secno></span> Conformance</a>
119120
<ul class=toc>
120121
<li><a href=#conventions><span class=secno></span> Document conventions</a>
@@ -225,10 +226,52 @@ <h3 class="heading settled heading" data-level=3.2 id=custom-selectors-cssom><sp
225226
<p class=issue id=issue-cb6e966f><a class=self-link href=#issue-cb6e966f></a>
226227
Fill in.
227228

228-
<h2 class="heading settled heading" data-level=4 id=custom-functions><span class=secno>4 </span><span class=content>
229+
<h2 class="heading settled heading" data-level=4 id=custom-property><span class=secno>4 </span><span class=content>
230+
Custom Properties</span><a class=self-link href=#custom-property></a></h2>
231+
232+
<div class=issue id=issue-234df7b0><a class=self-link href=#issue-234df7b0></a>
233+
Need to more fully support Custom Properties
234+
(and eventually remove them from the variable spec entirely, since they’ll be defined here).
235+
236+
<p> By default, custom properties are optimized for use as <a class=css data-link-type=maybe href=http://dev.w3.org/csswg/css-variables-1/#funcdef-var title=var()>var()</a> values—<wbr>they inherit,
237+
have an empty initial value,
238+
don’t do any syntax checking,
239+
and don’t animate.
240+
All of these should be adjustable somehow.
241+
242+
<pre>@custom-property --foo {
243+
scope: [ inherit | local ];
244+
initial: <a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/css-variables-1/#typedef-any-value title="<any-value>">&lt;any-value&gt;</a>*;
245+
value: <a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/css-values-3/#length-value title="<length>">&lt;length&gt;</a> <a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/css-values-3/#length-value title="<length>">&lt;length&gt;</a> <a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/css-color-3/#valuea-def-color title="<color>">&lt;color&gt;</a>;
246+
/* Literally, define a simplistic definition syntax.
247+
OR FULL CSS PROPERTY GRAMMAR?!? */
248+
}
249+
</pre>
250+
<p> If you provide a "value" field with animatable types,
251+
we can animate in the most direct fashion automatically.
252+
We could also let you hook into that:
253+
you register a callback,
254+
and whenever a property starts animating,
255+
we call it with the starting and ending values.
256+
You have to return a function which takes a progress value (between 0 and 1)
257+
and returns a value for your property;
258+
we’ll call it as we animate the value.
259+
(How can we hook into Web Anim here? Can you just return an Animation object?)
260+
261+
<p> Do we need a hook for computed values? Interesting.
262+
We could just hand your callback a set of property values for the element and its parent (maybe siblings, if you ask for it?),
263+
and you can return a new value for the property.
264+
This is probably an advanced feature for a later date.
265+
266+
<p> Definitely need a way to listen for elements receiving and changing property values,
267+
so you can efficiently polyfill things and make your own properties.
268+
Unsure how it would look at the moment.
269+
</div>
270+
271+
<h2 class="heading settled heading" data-level=5 id=custom-functions><span class=secno>5 </span><span class=content>
229272
Custom Functions</span><a class=self-link href=#custom-functions></a></h2>
230273

231-
<div class=issue id=issue-7496ea29><a class=self-link href=#issue-7496ea29></a>
274+
<div class=issue id=issue-a45b4c04><a class=self-link href=#issue-a45b4c04></a>
232275
Interesting possibilities here.
233276
Definitely need some way to define custom functions in CSS.
234277
This would, for example, let people define whatever color function they want,
@@ -268,11 +311,12 @@ <h2 class="heading settled heading" data-level=4 id=custom-functions><span class
268311

269312
<p> How much can we do in pure CSS?
270313
Being able to substitute values depending on MQs or support queries would be useful.
314+
(However, we can do that much just by using custom properties and <a class=css data-link-type=maybe href=http://dev.w3.org/csswg/css-variables-1/#funcdef-var title=var()>var()</a>.)
271315
To get *real* use out of it, though, I suspect we’d need fuller support for conditionals,
272316
likely in the form of SASS’s <span class=css data-link-type=maybe title=@if>@if</span> or something similar.
273317
</div>
274318

275-
<h2 class="heading settled heading" data-level=5 id=custom-combinators><span class=secno>5 </span><span class=content>
319+
<h2 class="heading settled heading" data-level=6 id=custom-combinators><span class=secno>6 </span><span class=content>
276320
Custom Selector Combinators</span><a class=self-link href=#custom-combinators></a></h2>
277321

278322
<div class=issue id=issue-e3f29f62><a class=self-link href=#issue-e3f29f62></a>
@@ -336,7 +380,7 @@ <h2 class="heading settled heading" data-level=5 id=custom-combinators><span cla
336380
so that you’re guaranteed to be called again.
337381
</div>
338382

339-
<h2 class="heading settled heading" data-level=6 id=custom-atrules><span class=secno>6 </span><span class=content>
383+
<h2 class="heading settled heading" data-level=7 id=custom-atrules><span class=secno>7 </span><span class=content>
340384
Custom At-Rules</span><a class=self-link href=#custom-atrules></a></h2>
341385

342386
<div class=issue id=issue-ba92a73c><a class=self-link href=#issue-ba92a73c></a>
@@ -538,6 +582,45 @@ <h2 class="no-num heading settled" id=issues-index><span class=content>Issues In
538582
Fill in.
539583

540584
<a href=#issue-cb6e966f> ↵ </a></div><div class=issue>
585+
Need to more fully support Custom Properties
586+
(and eventually remove them from the variable spec entirely, since they’ll be defined here).
587+
588+
<p> By default, custom properties are optimized for use as <a class=css data-link-type=maybe href=http://dev.w3.org/csswg/css-variables-1/#funcdef-var title=var()>var()</a> values—<wbr>they inherit,
589+
have an empty initial value,
590+
don’t do any syntax checking,
591+
and don’t animate.
592+
All of these should be adjustable somehow.
593+
594+
<pre>@custom-property --foo {
595+
scope: [ inherit | local ];
596+
initial: <a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/css-variables-1/#typedef-any-value title="<any-value>">&lt;any-value&gt;</a>*;
597+
value: <a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/css-values-3/#length-value title="<length>">&lt;length&gt;</a> <a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/css-values-3/#length-value title="<length>">&lt;length&gt;</a> <a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/css-color-3/#valuea-def-color title="<color>">&lt;color&gt;</a>;
598+
/* Literally, define a simplistic definition syntax.
599+
OR FULL CSS PROPERTY GRAMMAR?!? */
600+
}
601+
</pre>
602+
<p> If you provide a "value" field with animatable types,
603+
we can animate in the most direct fashion automatically.
604+
We could also let you hook into that:
605+
you register a callback,
606+
and whenever a property starts animating,
607+
we call it with the starting and ending values.
608+
You have to return a function which takes a progress value (between 0 and 1)
609+
and returns a value for your property;
610+
we’ll call it as we animate the value.
611+
(How can we hook into Web Anim here? Can you just return an Animation object?)
612+
613+
<p> Do we need a hook for computed values? Interesting.
614+
We could just hand your callback a set of property values for the element and its parent (maybe siblings, if you ask for it?),
615+
and you can return a new value for the property.
616+
This is probably an advanced feature for a later date.
617+
618+
<p> Definitely need a way to listen for elements receiving and changing property values,
619+
so you can efficiently polyfill things and make your own properties.
620+
Unsure how it would look at the moment.
621+
</p><a href=#issue-234df7b0> ↵ </a></div>
622+
623+
<div class=issue>
541624
Interesting possibilities here.
542625
Definitely need some way to define custom functions in CSS.
543626
This would, for example, let people define whatever color function they want,
@@ -577,9 +660,10 @@ <h2 class="no-num heading settled" id=issues-index><span class=content>Issues In
577660

578661
<p> How much can we do in pure CSS?
579662
Being able to substitute values depending on MQs or support queries would be useful.
663+
(However, we can do that much just by using custom properties and <a class=css data-link-type=maybe href=http://dev.w3.org/csswg/css-variables-1/#funcdef-var title=var()>var()</a>.)
580664
To get *real* use out of it, though, I suspect we’d need fuller support for conditionals,
581665
likely in the form of SASS’s <span class=css data-link-type=maybe title=@if>@if</span> or something similar.
582-
</p><a href=#issue-7496ea29> ↵ </a></div>
666+
</p><a href=#issue-a45b4c04> ↵ </a></div>
583667

584668
<div class=issue>
585669
Selectors are made of two pieces:

0 commit comments

Comments
 (0)