Skip to content

Commit ea97589

Browse files
tabatkinstabatkins
committed
[css-will-change] Specify the behavior of shorthands in will-change.
1 parent 81eb5c7 commit ea97589

2 files changed

Lines changed: 28 additions & 11 deletions

File tree

‎css-will-change/Overview.bs‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -226,6 +226,13 @@ Hinting at Future Behavior: the 'will-change' property</h2>
226226
<dt><dfn><<custom-ident>></dfn>
227227
<dd>
228228
Indicates that the author expects to animate or change the property with the given name on the element in the near future.
229+
If the property given is a shorthand,
230+
it indicates the expectation for all the longhands the shorthand expands to.
231+
232+
<p class='example'>
233+
For example, setting ''will-change: background;''
234+
is identical to setting ''will-change: background-image, background-position, ...''
235+
for all the properties that 'background' expands into.
229236

230237
The <<custom-ident>> production used here excludes the keywords ''will-change'', ''none'', ''all'', ''auto'', ''scroll-position'', and ''contents'',
231238
in addition to the keywords normally excluded from <<custom-ident>>.

‎css-will-change/Overview.html‎

Lines changed: 21 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -49,12 +49,12 @@
4949
<body class=h-entry>
5050
<div class=head>
5151
<p data-fill-with=logo><a class=logo href=http://www.w3.org/>
52-
<img alt=W3C height=48 src=http://www.w3.org/Icons/w3c_home width=72>
52+
<img alt=W3C height=48 src=https://www.w3.org/Icons/w3c_home width=72>
5353
</a>
5454
</p>
5555
<h1 class="p-name no-ref" id=title>CSS Will Change Module Level 1</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=20140513>13 May 2014</span></span></span></h2>
57+
<span class=dt-updated><span class=value-title title=20140613>13 June 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-will-change/>http://dev.w3.org/csswg/css-will-change/</a><dt>Latest version:<dd><a href=http://www.w3.org/TR/css-will-change/>http://www.w3.org/TR/css-will-change/</a><dt>Editor’s Draft:<dd><a href=http://dev.w3.org/csswg/css-will-change/>http://dev.w3.org/csswg/css-will-change/</a>
5959
<dt>Feedback:</dt>
6060
<dd><a href="mailto:www-style@w3.org?subject=%5Bcss-will-change%5D%20feedback">www-style@w3.org</a>
@@ -144,8 +144,8 @@ <h2 class="heading settled heading" data-level=1 id=intro><span class=secno>1 </
144144
and often provides significant speed benefits.
145145

146146
<p>However, setting up the element in a fresh layer is a relatively expensive operation,
147-
which can delay the start of a <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-transforms-1/#propdef-transform title=transform>transform</a> animation by a noticeable fraction of a second.
148-
</div><p></p>
147+
which can delay the start of a <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-transforms-1/#propdef-transform title=transform>transform</a> animation by a noticeable fraction of a second.</p>
148+
</div>
149149

150150
<p>The <a class=property data-link-type=propdesc href=#propdef-will-change title=will-change>will-change</a> property defined in this specification allows an author to declare ahead-of-time what properties are likely to change in the future,
151151
so the UA can set up the appropriate optimizations some time before they’re needed.
@@ -208,8 +208,8 @@ <h4 class="no-num no-toc heading settled heading" id=css-sparingly><span class=c
208208

209209
<p>Because this is limited to a small number of elements,
210210
the fact that the optimization is rarely actually used
211-
doesn’t hurt very much.
212-
</div><p></p>
211+
doesn’t hurt very much.</p>
212+
</div>
213213

214214
<div class=example>
215215
Sometimes an element really <em>does</em> change a property nearly constantly.
@@ -277,9 +277,9 @@ <h4 class="no-num no-toc heading settled heading" id=dont-waste><span class=cont
277277
<h2 class="heading settled heading" data-level=2 id=will-change><span class=secno>2 </span><span class=content>
278278
Hinting at Future Behavior: the <a class=property data-link-type=propdesc href=#propdef-will-change title=will-change>will-change</a> property</span><a class=self-link href=#will-change></a></h2>
279279

280-
<table class="definition propdef"><tr><th>Name:<td><dfn class=css-code data-dfn-type=property data-export="" id=propdef-will-change>will-change<a class=self-link href=#propdef-will-change></a></dfn><tr><th>Value:<td class=prod>auto | <a class="production css-code" data-link-type=type href=#typedef-animateable-feature title="<animateable-feature>">&lt;animateable-feature&gt;</a>#<tr><th>Initial:<td>auto<tr><th>Applies to:<td>all elements<tr><th>Inherited:<td>no<tr><th>Media:<td>all<tr><th>Computed value:<td>specified value<tr><th>Percentages:<td>n/a</table>
280+
<table class="definition propdef"><tr><th>Name:<td><dfn class=css-code data-dfn-type=property data-export="" id=propdef-will-change>will-change<a class=self-link href=#propdef-will-change></a></dfn><tr><th>Value:<td class=prod>auto <a class=prod-punc data-link-type=grammar href=http://dev.w3.org/csswg/css-values-3/#comb-one title=|>|</a> <a class="production css-code" data-link-type=type href=#typedef-animateable-feature title="<animateable-feature>">&lt;animateable-feature&gt;</a><a class=prod-punc data-link-type=grammar href=http://dev.w3.org/csswg/css-values-3/#mult-comma title=#>#</a><tr><th>Initial:<td>auto<tr><th>Applies to:<td>all elements<tr><th>Inherited:<td>no<tr><th>Media:<td>all<tr><th>Computed value:<td>specified value<tr><th>Percentages:<td>n/a</table>
281281

282-
<pre class=prod><dfn class=css-code data-dfn-type=type data-export="" id=typedef-animateable-feature>&lt;animateable-feature&gt;<a class=self-link href=#typedef-animateable-feature></a></dfn> = scroll-position | contents | <a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/css-values-3/#identifier-value title="<custom-ident>">&lt;custom-ident&gt;</a></pre>
282+
<pre class=prod><dfn class=css-code data-dfn-type=type data-export="" id=typedef-animateable-feature>&lt;animateable-feature&gt;<a class=self-link href=#typedef-animateable-feature></a></dfn> = scroll-position <a class=prod-punc data-link-type=grammar href=http://dev.w3.org/csswg/css-values-3/#comb-one title=|>|</a> contents <a class=prod-punc data-link-type=grammar href=http://dev.w3.org/csswg/css-values-3/#comb-one title=|>|</a> <a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/css-values-3/#identifier-value title="<custom-ident>">&lt;custom-ident&gt;</a></pre>
283283

284284
<p>The <a class=property data-link-type=propdesc href=#propdef-will-change title=will-change>will-change</a> property provides a rendering hint to the user agent,
285285
stating what kinds of changes the author expects to perform on the element.
@@ -330,6 +330,13 @@ <h2 class="heading settled heading" data-level=2 id=will-change><span class=secn
330330
<dt><dfn class=css-code data-dfn-for=will-change data-dfn-type=value data-export="" id=valuedef-custom-ident><a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/css-values-3/#identifier-value title="<custom-ident>">&lt;custom-ident&gt;</a><a class=self-link href=#valuedef-custom-ident></a></dfn>
331331
<dd>
332332
Indicates that the author expects to animate or change the property with the given name on the element in the near future.
333+
If the property given is a shorthand,
334+
it indicates the expectation for all the longhands the shorthand expands to.
335+
336+
<p class=example>
337+
For example, setting <a class=css data-link-type=propdesc href=#propdef-will-change title=will-change>will-change: background;</a>
338+
is identical to setting <a class=css data-link-type=propdesc href=#propdef-will-change title=will-change>will-change: background-image, background-position, ...</a>
339+
for all the properties that <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-backgrounds-3/#background title=background>background</a> expands into.
333340

334341
<p>The <a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/css-values-3/#identifier-value title="<custom-ident>">&lt;custom-ident&gt;</a> production used here excludes the keywords <span class=css data-link-type=maybe title=will-change>will-change</span>, <span class=css data-link-type=maybe title=none>none</span>, <span class=css data-link-type=maybe title=all>all</span>, <a class=css data-link-type=maybe href=#valuedef-auto title=auto>auto</a>, <a class=css data-link-type=maybe href=#valuedef-scroll-position title=scroll-position>scroll-position</a>, and <a class=css data-link-type=maybe href=#valuedef-contents title=contents>contents</a>,
335342
in addition to the keywords normally excluded from <a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/css-values-3/#identifier-value title="<custom-ident>">&lt;custom-ident&gt;</a>.</p>
@@ -386,7 +393,7 @@ <h3 class="no-ref heading settled heading" id=conventions><span class=content>
386393
letters in this specification.
387394

388395
<p>All of the text of this specification is normative except sections
389-
explicitly marked as non-normative, examples, and notes. <a data-biblio-type=normative data-link-type=biblio href=#rfc2119 title=rfc2119>[RFC2119]</a></p>
396+
explicitly marked as non-normative, examples, and notes. <a data-biblio-type=normative data-link-type=biblio href=#biblio-rfc2119 title=biblio-rfc2119>[RFC2119]</a></p>
390397

391398
<p>Examples in this specification are introduced with the words "for example"
392399
or are set apart from the normative text with <code>class="example"</code>,
@@ -496,11 +503,14 @@ <h2 class="no-num no-ref heading settled heading" id=references><span class=cont
496503

497504
<h3 class="no-num no-ref heading settled heading" id=normative><span class=content>
498505
Normative References</span><a class=self-link href=#normative></a></h3>
499-
<div data-fill-with=normative-references><dl><dt id=rfc2119 title=RFC2119><a class=self-link href=#rfc2119></a>[RFC2119]<dd>S. Bradner. <a href=http://www.ietf.org/rfc/rfc2119.txt>Key words for use in RFCs to Indicate Requirement Levels</a>. URL: <a href=http://www.ietf.org/rfc/rfc2119.txt>http://www.ietf.org/rfc/rfc2119.txt</a></dl></div>
506+
<div data-fill-with=normative-references><dl>
507+
<dt id=biblio-rfc2119 title=RFC2119><a class=self-link href=#biblio-rfc2119></a>[RFC2119]<dd>S. Bradner. <a href=http://www.ietf.org/rfc/rfc2119.txt>Key words for use in RFCs to Indicate Requirement Levels</a>. URL: <a href=http://www.ietf.org/rfc/rfc2119.txt>http://www.ietf.org/rfc/rfc2119.txt</a></dd>
508+
</dl></div>
500509

501510
<h3 class="no-num no-ref heading settled heading" id=informative><span class=content>
502511
Informative References</span><a class=self-link href=#informative></a></h3>
503-
<div data-fill-with=informative-references><dl></dl></div>
512+
<div data-fill-with=informative-references><dl>
513+
</dl></div>
504514

505515
<h2 class="no-num no-ref heading settled heading" id=index><span class=content>
506516
Index</span><a class=self-link href=#index></a></h2>

0 commit comments

Comments
 (0)