Adds implementations of the Scope Chain and Call Stack sidebar panes.
[WebKit-https.git] / WebKitSite / specs / Timed_Media_CSS.html
1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
2
3 <html>
4 <head>
5         <title> Proposed Timed Media CSS </title> 
6         <link href="./mediaelement.css" rel="stylesheet" type="text/css">
7
8         <style type="text/css">
9                 h4 + .element { margin-top: -2.5em; padding-top: 2em; }
10                 h4 + p + .element { margin-top: -5em; padding-top: 4em; }
11                 .element { background: #EEFFEE; color: black; margin: 0 0 1em -1em; padding: 0 1em 0.25em 0.75em; border-left: solid #99FF99 0.25em; -padding: 0; /* that last decl is for IE6. Try removing it, it's hilarious! */ }
12                 .proposal { border: blue solid; padding: 1em; }
13                 table.matrix, table.matrix td { border: none; text-align: right; }
14                 table.matrix { margin-left: 2em; }
15
16                 table.propinfo, table.propinfo th, table.propinfo td { border: none; }
17                 table.history, table.history th, table.history td { border: solid thin; font-size: x-small }
18                 table.history { width: 100%; }
19                 td.hversion, td.author, td.date { width: 5%; }
20                 td.change { width: 65%; }
21         </style>
22
23 </head>
24 <body class="draft">
25
26         <div class="head">
27                 <h1> Timed Media CSS </h1> 
28                 <h2 class="no-num no-toc" id="working"> Working Draft &mdash; 19 March 2007 </h2> 
29
30                 <p class="copyright">&copy; Copyright 2007 Apple Inc. </p>
31
32         </div>
33         <h2 class="no-num no-toc" id="abstract"> Abstract </h2> 
34
35         <p>This specification defines a set of properties of Cascading Style Sheets for the presentation
36         of timed media, including but not limited to video and audio. By separating the presentation
37         style of timed media elements from their contents, these properties further simplify Web
38         authoring and site maintenance.</p>
39
40         <p>While there are cases in which the playback of timed media is semantically meaningful within the
41         context of a document, there are many cases in which playback is entirely presentational.
42         Therefore we offer a reasonable set of CSS properties to control whether media is playing or not
43         according to presentation state, along with control over the portions of media that are to be
44         presented, looping behavior, and audio volume.</p>
45         
46         <h2 class="no-num no-toc" id="status"> Status of this document </h2> 
47
48         <p><strong>This is a work in progress!</strong> This document is changing frequently in response
49         to comments and as a general part of its development process. Comments are very welcome.</p>
50         
51         <h2 class="no-num no-toc"id="contents"> Table of contents </h2>
52
53         <!--begin-toc-->
54         <ul class="toc">
55                 <li><a href="#introduction"><span class="secno">1.</span>Introduction</a> 
56                         
57                 <li><a href="#new-syntax"><span class=secno>2. </span>New syntax</a>
58
59                 <li><a href="#new-properties"><span class=secno>3. </span>New Properties</a>
60                         <ul class=toc>
61                                 <li><a href="#propdef-media-play-state"><span class=secno>3.1.</span> 'media-play-state'</a>
62                                 <li><a href="#propdef-media-play-rate"><span class=secno>3.2.</span> 'media-play-rate'</a>
63                                 <li><a href="#propdef-media-start-time"><span class=secno>3.3.</span> 'media-start-time'</a>
64                                 <li><a href="#propdef-media-end-time"><span class=secno>3.4.</span> 'media-end-time'</a>
65                                 <li><a href="#propdef-media-loop-count"><span class=secno>3.5.</span> 'media-loop-count'</a>
66                                 <li><a href="#propdef-media-loop-start-time"><span class=secno>3.6.</span> 'media-loop-start-time'</a>
67                                 <li><a href="#propdef-media-loop-end-time"><span class=secno>3.7.</span> 'media-loop-end-time'</a>
68                                 <li><a href="#propdef-volume"><span class=secno>3.8.</span> 'volume'</a>
69                                 <li><a href="#propdef-media-timing"><span class=secno>3.9.</span> 'media-timing'</a>
70                         </ul>
71
72                 <li class=no-num><a href="#references">References</a>
73                 
74                 <li class=no-num><a href="#acknowledgements">Acknowledgements</a>
75                 
76                 <li class=no-num><a href="#history">Change history</a>
77
78         </ul>
79         <!--end-toc-->
80
81         <hr>
82         <h2 id="introduction"><span class="secno">1. </span>Introduction</h2> 
83         <em>This section is non-normative.</em> 
84         
85         <p class=big-issue>Moving introduction coming...</p>
86         
87         <h2 id="new-syntax"><span class="secno">2. </span>New syntax</h2> 
88
89         <h2 id="new-properties"><span class="secno">3. </span>New Properties</h2> 
90         
91         <p>These properties apply to elements that embed timed media, such as movies or sounds.</p>
92
93
94         <h4>3.1 <a name="propdef-media-play-state" href="#propdef-media-play-state" class="noxref">
95         <span class="propinst-media-play-state">'media-play-state'</span></a></h4>
96         
97         <div class="propdef">
98                 <dl><dt>
99                 <span class="index-def" title="'media-play-state'"><a name="propdef-media-play-state" class="propdef-title"><strong>'media-play-state'</strong></a></span>
100                         <dd>
101                         <table class="propinfo">
102                                 <tr><td><em>Value:</em>&nbsp;&nbsp;<td>
103                                         playing | paused | inherit
104                                 <tr><td><em>Initial:</em>&nbsp;&nbsp;<td>paused
105                                 <tr><td><em>Applies to:</em>&nbsp;&nbsp;<td>timed media elements
106                                 <tr><td><em>Inherited:</em>&nbsp;&nbsp;<td>no
107                                 <tr><td><em>Percentages:</em>&nbsp;&nbsp;<td>see prose
108                                 <tr><td><em>Media:</em>&nbsp;&nbsp;<td>visual, audio
109                                 <tr><td><em>Computed&nbsp;value:</em>&nbsp;&nbsp;<td>the value or percentage as specified
110                         </table>
111                 </dl>
112         </div>
113
114         <p>The <a href="#propdef-media-play-state" class="noxref">
115         <span class="propinst-media-play-state">'media-play-state'</span></a> starts or stops 
116         a timed media item. 
117         </p>
118
119         <p>Values have the following meanings:</p>
120         
121         <dl>
122                 <dt><strong>playing</strong>
123                         <dd>Playing at the <a href="#propdef-media-play-rate" class="noxref">'media-play-rate'</a>.
124
125                 <dt><strong>paused</strong>
126                         <dd>Not playing.
127         </dl>
128
129
130 <pre>
131  movie#halt { media-play-state: paused; }
132 </pre>
133
134         <h4>3.2 <a name="propdef-media-play-rate" href="#propdef-media-play-rate" class="noxref">
135         <span class="propinst-media-play-rate">'media-play-rate'</span></a></h4>
136         
137         <div class="propdef">
138                 <dl><dt>
139                 <span class="index-def" title="'media-play-rate'"><a name="propdef-media-play-rate" class="propdef-title"><strong>'media-play-rate'</strong></a></span>
140                         <dd>
141                         <table class="propinfo">
142                                 <tr><td><em>Value:</em>&nbsp;&nbsp;<td>
143                                         <a href="http://www.w3.org/TR/CSS21/syndata.html#value-def-number" class="noxref"><span class="value-inst-number">&lt;number&gt;</span></a> 
144                                         | <a href="http://www.w3.org/TR/CSS21/syndata.html#value-def-percentage" class="noxref"><span class="value-inst-percentage">&lt;percentage&gt;</span></a> 
145                                         | inherit
146                                 <tr><td><em>Initial:</em>&nbsp;&nbsp;<td>1
147                                 <tr><td><em>Applies to:</em>&nbsp;&nbsp;<td>timed media elements
148                                 <tr><td><em>Inherited:</em>&nbsp;&nbsp;<td>no
149                                 <tr><td><em>Percentages:</em>&nbsp;&nbsp;<td>see prose
150                                 <tr><td><em>Media:</em>&nbsp;&nbsp;<td>visual, audio
151                                 <tr><td><em>Computed&nbsp;value:</em>&nbsp;&nbsp;<td>the value or percentage as specified
152                         </table>
153                 </dl>
154         </div>
155
156         <p>The <a href="#propdef-media-play-rate" class="noxref">
157         <span class="propinst-media-play-rate">'media-play-rate'</span></a> sets 
158         the play rate of a timed media item, such as a movie or sound. The user agents
159         may preserve pitch when changing the rate of audio if possible.
160         <span class=big-issue>Wording ????</span>
161         </p>
162
163         <p>Values have the following meanings:</p>
164         <dl>
165                 <dt><span class="index-inst" title="&lt;number&gt;">
166                                 <a name="x11" href="http://www.w3.org/TR/CSS21/syndata.html#value-def-number" class="noxref">
167                                 <span class="value-inst-number"><strong>&lt;number&gt;</strong></span></a>
168                         </span>
169                         <dd>A floating point number is the the default play rate of the 
170                         media item. Negative play rates are allowed and imply playing backwards, although not 
171                         all media formats support reverse play.</p>
172
173                 <dt><span class="index-inst" title="&lt;percentage&gt;"><a name="x12" href="http://www.w3.org/TR/CSS21/syndata.html#value-def-percentage" class="noxref">
174                         <span class="value-inst-percentage"><strong>&lt;percentage&gt;</strong></span></a></span>
175                         <dd>Percentage values are calculated relative to the default play rate of the media item,
176                         as defined by the resource's container format, for example the "preferredRate" of a
177                         QuickTime movie. May be negative or greater than 100% as allowed by the media format. 
178         </dl>
179
180 <pre>
181  movie:hover { media-play-state: playing; media-play-rate: 0.5; }
182 </pre>
183
184         <h4>3.3 <a name="propdef-media-start-time" href="#propdef-media-start-time" class="noxref">
185         <span class="propinst-media-start-time">'media-start-time'</span></a></h4>
186         
187         <div class="propdef">
188                 <dl><dt>
189                 <span class="index-def" title="'media-start-time'"><a name="propdef-media-start-time" class="propdef-title"><strong>'media-start-time'</strong></a></span>
190                         <dd>
191                         <table class="propinfo">
192                                 <tr><td><em>Value:</em>&nbsp;&nbsp;<td>
193                                         <a href="http://www.w3.org/TR/CSS21/aural.html#value-def-time" class="noxref"><span class="value-inst-time">&lt;time&gt;</span></a> 
194                                         | <a href="http://www.w3.org/TR/CSS21/syndata.html#value-def-percentage" class="noxref"><span class="value-inst-percentage">&lt;percentage&gt;</span></a> 
195                                         | inherit
196                                 <tr><td><em>Initial:</em>&nbsp;&nbsp;<td>0s
197                                 <tr><td><em>Applies to:</em>&nbsp;&nbsp;<td>timed media elements
198                                 <tr><td><em>Inherited:</em>&nbsp;&nbsp;<td>no
199                                 <tr><td><em>Percentages:</em>&nbsp;&nbsp;<td>see prose
200                                 <tr><td><em>Media:</em>&nbsp;&nbsp;<td>visual, audio
201                                 <tr><td><em>Computed&nbsp;value:</em>&nbsp;&nbsp;<td>the value as specified
202                         </table>
203                 </dl>
204         </div>
205
206         <p>The <a href="#propdef-media-start-time" class="noxref">
207         <span class="propinst-media-start-time">'media-start-time'</span></a> sets 
208         the time at which the media item begins playing. Negative values are from 
209         the total duration of the complete media item.</p>
210
211         <p>Values have the following meanings:</p>
212         <dl>
213                 <dt><span class="index-inst" title="&lt;number&gt;">
214                                 <a name="x11" href="http://www.w3.org/TR/CSS21/syndata.html#value-def-number" class="noxref">
215                                 <span class="value-inst-number"><strong>&lt;number&gt;</strong></span></a>
216                         </span>
217                         <dd>Start time in absolute time units (seconds and milliseconds).
218         
219                 <dt><span class="index-inst" title="&lt;percentage&gt;"><a name="x12" href="http://www.w3.org/TR/CSS21/syndata.html#value-def-percentage" class="noxref">
220                         <span class="value-inst-percentage"><strong>&lt;percentage&gt;</strong></span></a></span>
221                         <dd>Percentage values are calculated relative to the total duration of the complete 
222                         media item. Negative percentages are relative offsets from the total duration of 
223                         the complete media item.
224         </dl>
225
226 <pre>
227 movie#main { media-start-time: 10s }
228 </pre>
229
230         <h4>3.4 <a name="propdef-media-end-time" href="#propdef-media-end-time" class="noxref">
231         <span class="propinst-media-end-time">'media-end-time'</span></a></h4>
232         
233         <div class="propdef">
234                 <dl><dt>
235                 <span class="index-def" title="'media-end-time'"><a name="propdef-media-end-time" class="propdef-title"><strong>'media-end-time'</strong></a></span>
236                         <dd>
237                         <table class="propinfo">
238                                 <tr><td><em>Value:</em>&nbsp;&nbsp;<td>
239                                         <a href="http://www.w3.org/TR/CSS21/aural.html#value-def-time" class="noxref"><span class="value-inst-time">&lt;time&gt;</span></a> 
240                                         | <a href="http://www.w3.org/TR/CSS21/syndata.html#value-def-percentage" class="noxref"><span class="value-inst-percentage">&lt;percentage&gt;</span></a> 
241                                         | inherit
242                                 <tr><td><em>Initial:</em>&nbsp;&nbsp;<td>-0s
243                                 <tr><td><em>Applies to:</em>&nbsp;&nbsp;<td>timed media elements
244                                 <tr><td><em>Inherited:</em>&nbsp;&nbsp;<td>no
245                                 <tr><td><em>Percentages:</em>&nbsp;&nbsp;<td>see prose
246                                 <tr><td><em>Media:</em>&nbsp;&nbsp;<td>visual, audio
247                                 <tr><td><em>Computed&nbsp;value:</em>&nbsp;&nbsp;<td>the value as specified
248                         </table>
249                 </dl>
250         </div>
251
252         <p>The <a href="#propdef-media-end-time" class="noxref">
253         <span class="propinst-media-end-time">'media-end-time'</span></a> sets 
254         the time at which the media item stops playing. Negative values are offsets 
255         from the total duration of the complete media item.</p>
256
257         <p>Values have the following meanings:</p>
258         <dl>
259                 <dt><span class="index-inst" title="&lt;time&gt;">
260                                 <a name="x11" href="http://www.w3.org/TR/CSS21/aural.html#value-def-time" class="noxref">
261                                 <span class="value-inst-time"><strong>&lt;time&gt;</strong></span></a>
262                         </span>
263                         <dd>End time in absolute time units (seconds and milliseconds).
264         
265                 <dt><span class="index-inst" title="&lt;percentage&gt;"><a name="x12" href="http://www.w3.org/TR/CSS21/syndata.html#value-def-percentage" class="noxref">
266                         <span class="value-inst-percentage"><strong>&lt;percentage&gt;</strong></span></a></span>
267                         <dd>Percentage values are calculated relative to the total duration of the complete 
268                         media item. Negative percentages are relative offsets from the total duration of 
269                         the complete media item.
270         </dl>
271
272 <pre>
273 movie#main { media-end-time: -5s }
274 </pre>
275
276
277
278         <h4>3.5 <a name="propdef-media-loop-count" href="#propdef-media-loop-count" class="noxref">
279         <span class="propinst-media-loop-count">'media-loop-count'</span></a></h4>
280         
281         <div class="propdef">
282                 <dl><dt>
283                 <span class="index-def" title="'media-loop-count'"><a name="propdef-media-loop-count" class="propdef-title"><strong>'media-loop-count'</strong></a></span>
284                         <dd>
285                         <table class="propinfo">
286                                 <tr><td><em>Value:</em>&nbsp;&nbsp;<td>
287                                         <a href="http://www.w3.org/TR/CSS21/syndata.html#value-def-number" class="noxref"><span class="value-inst-number">&lt;number&gt;</span></a> 
288                                         | infinite 
289                                         | inherit
290                                 <tr><td><em>Initial:</em>&nbsp;&nbsp;<td>1
291                                 <tr><td><em>Applies to:</em>&nbsp;&nbsp;<td>timed media elements
292                                 <tr><td><em>Inherited:</em>&nbsp;&nbsp;<td>no
293                                 <tr><td><em>Percentages:</em>&nbsp;&nbsp;<td>N/A
294                                 <tr><td><em>Media:</em>&nbsp;&nbsp;<td>visual, audio
295                                 <tr><td><em>Computed&nbsp;value:</em>&nbsp;&nbsp;<td>the value as specified
296                         </table>
297                 </dl>
298         </div>
299
300         <p>The <a href="#propdef-media-loop-count" class="noxref">
301         <span class="propinst-media-loop-count">'media-loop-count'</span></a> sets 
302         the number of times the media item will loop when played.</p>
303
304         <p>Values have the following meanings:</p>
305         <dl>
306                 <dt><span class="index-inst" title="&lt;number&gt;">
307                                 <a name="x11" href="http://www.w3.org/TR/CSS21/syndata.html#value-def-number" class="noxref">
308                                 <span class="value-inst-number"><strong>&lt;number&gt;</strong></span></a>
309                         </span>
310                         <dd>The number of time the media resource will loop. The default value of "1" means
311                         the item will play through once but will not loop.
312         
313                 <dt><span class="index-inst" title="infinite">
314                         <span class="value-inst-infinite"><strong>infinite</strong></span></span>
315                         <dd>The media item will loop indefinitely.
316         </dl>
317
318
319 <pre>
320 audio.ambient { media-loop-count: infinite }
321 </pre>
322
323
324
325         <h4>3.6 <a name="propdef-media-loop-start-time" href="#propdef-media-loop-start-time" class="noxref">
326         <span class="propinst-media-loop-start-time">'media-loop-start-time'</span></a></h4>
327         
328         <div class="propdef">
329                 <dl><dt>
330                 <span class="index-def" title="'media-loop-start-time'"><a name="propdef-media-loop-start-time" class="propdef-title"><strong>'media-loop-start-time'</strong></a></span>
331                         <dd>
332                         <table class="propinfo">
333                                 <tr ><td><em>Value:</em>&nbsp;&nbsp;<td>
334                                         <a href="http://www.w3.org/TR/CSS21/aural.html#value-def-time" class="noxref"><span class="value-inst-time">&lt;time&gt;</span></a> 
335                                         | <a href="http://www.w3.org/TR/CSS21/syndata.html#value-def-percentage" class="noxref"><span class="value-inst-percentage">&lt;percentage&gt;</span></a> 
336                                         | inherit
337                                 <tr><td><em>Initial:</em>&nbsp;&nbsp;<td>0s
338                                 <tr><td><em>Applies to:</em>&nbsp;&nbsp;<td>timed media elements
339                                 <tr><td><em>Inherited:</em>&nbsp;&nbsp;<td>no
340                                 <tr><td><em>Percentages:</em>&nbsp;&nbsp;<td>see prose
341                                 <tr><td><em>Media:</em>&nbsp;&nbsp;<td>visual, audio
342                                 <tr><td><em>Computed&nbsp;value:</em>&nbsp;&nbsp;<td>the value as specified
343                         </table>
344                 </dl>
345         </div>
346
347         <p>The <a href="#propdef-media-loop-start-time" class="noxref">
348         <span class="propinst-media-loop-start-time">'media-loop-start-time'</span></a> sets 
349         the time at which the media item begins playing after looping. </p>
350
351         <p>Values have the following meanings:</p>
352         <dl>
353                 <dt><span class="index-inst" title="&lt;time&gt;">
354                                 <a name="x11" href="http://www.w3.org/TR/CSS21/aural.html#value-def-time" class="noxref">
355                                 <span class="value-inst-time"><strong>&lt;time&gt;</strong></span></a>
356                         </span>
357                         <dd>Start time in absolute time units (seconds and milliseconds). Negative values are offsets from 
358                         the total duration of the complete media item.
359         
360                 <dt><span class="index-inst" title="&lt;percentage&gt;"><a name="x12" href="http://www.w3.org/TR/CSS21/syndata.html#value-def-percentage" class="noxref">
361                         <span class="value-inst-percentage"><strong>&lt;percentage&gt;</strong></span></a></span>
362                         <dd>Percent of total duration of the complete media item. Negative percentages are 
363                         relative offsets from the total duration of the complete media item.
364         </dl>
365
366 <pre>
367 audio.ambient { media-loop-start-time: 6s }
368 </pre>
369
370
371
372         <h4>3.7 <a name="propdef-media-loop-end-time" href="#propdef-media-loop-end-time" class="noxref">
373         <span class="propinst-media-loop-end-time">'media-loop-end-time'</span></a></h4>
374         
375         <div class="propdef">
376                 <dl><dt>
377                 <span class="index-def" title="'media-loop-end-time'"><a name="propdef-media-loop-end-time" class="propdef-title"><strong>'media-loop-end-time'</strong></a></span>
378                         <dd>
379                         <table class="propinfo">
380                                 <tr ><td><em>Value:</em>&nbsp;&nbsp;<td>
381                                         <a href="http://www.w3.org/TR/CSS21/aural.html#value-def-time" class="noxref"><span class="value-inst-time">&lt;time&gt;</span></a> 
382                                         | <a href="http://www.w3.org/TR/CSS21/syndata.html#value-def-percentage" class="noxref"><span class="value-inst-percentage">&lt;percentage&gt;</span></a> 
383                                         | inherit
384                                 <tr><td><em>Initial:</em>&nbsp;&nbsp;<td>-0s
385                                 <tr><td><em>Applies to:</em>&nbsp;&nbsp;<td>timed media elements
386                                 <tr><td><em>Inherited:</em>&nbsp;&nbsp;<td>no
387                                 <tr><td><em>Percentages:</em>&nbsp;&nbsp;<td>see prose
388                                 <tr><td><em>Media:</em>&nbsp;&nbsp;<td>visual, audio
389                                 <tr><td><em>Computed&nbsp;value:</em>&nbsp;&nbsp;<td>the value as specified
390                         </table>
391                 </dl>
392         </div>
393
394         <p>The <a href="#propdef-media-loop-end-time" class="noxref">
395         <span class="propinst-media-loop-end-time">'media-loop-end-time'</span></a> sets 
396         the time at which the media item loops for the second and subsequent repetitions.</p>
397
398         <p>Values have the following meanings:</p>
399         <dl>
400                 <dt><span class="index-inst" title="&lt;time&gt;">
401                                 <a name="x11" href="http://www.w3.org/TR/CSS21/aural.html#value-def-time" class="noxref">
402                                 <span class="value-inst-time"><strong>&lt;time&gt;</strong></span></a>
403                         </span>
404                         <dd>End time in absolute time units (seconds and milliseconds). Negative values are offsets from 
405                         the total duration of the complete media item.
406         
407                 <dt><span class="index-inst" title="&lt;percentage&gt;"><a name="x12" href="http://www.w3.org/TR/CSS21/syndata.html#value-def-percentage" class="noxref">
408                         <span class="value-inst-percentage"><strong>&lt;percentage&gt;</strong></span></a></span>
409                         <dd>Percent of total duration of the complete media item. Negative percentages are 
410                         relative offsets from the total duration of the complete media item.
411         </dl>
412
413
414 <pre>
415 audio.ambient { media-loop-end-time: -9s }
416 </pre>
417
418         <h4>3.8 <a name="propdef-volume">Volume properties</a>: <a href="aural.html#propdef-volume" class="noxref">
419         <span class="propinst-volume">'volume'</span></a></h4>
420
421         <div class="propdef">
422                 <dl><dt>
423                         <span class="index-def" title="'volume'"><a name="propdef-volume" class="propdef-title"><strong>'volume'</strong></a></span>
424                         <dd>
425                         <table class="propinfo" cellspacing=0 cellpadding=0>
426                                 <tr valign=baseline><td><em>Value:</em>&nbsp;&nbsp;<td>
427                                         <a href="http://www.w3.org/TR/CSS21/syndata.html#value-def-number" class="noxref"><span class="value-inst-number">&lt;number&gt;</span></a> 
428                                         <a href="http://www.w3.org/TR/CSS21/syndata.html#value-def-percentage" class="noxref"><span class="value-inst-percentage">&lt;percentage&gt;</span></a> 
429                                         | silent | soft | medium | loud |
430                                 x-loud | <a href="cascade.html#value-def-inherit" class="noxref"><span class="value-inst-inherit">inherit</span></a>
431                                 <tr valign=baseline><td><em>Initial:</em>&nbsp;&nbsp;<td>medium
432                                 <tr valign=baseline><td><em>Applies to:</em>&nbsp;&nbsp;<td>all elements
433                                 <tr valign=baseline><td><em>Inherited:</em>&nbsp;&nbsp;<td>yes
434                                 <tr valign=baseline><td><em>Percentages:</em>&nbsp;&nbsp;<td>refer to inherited value
435                                 <tr valign=baseline><td><em>Media:</em>&nbsp;&nbsp;<td>visual, audio
436                                 <tr valign=baseline><td><em>Computed&nbsp;value:</em>&nbsp;&nbsp;<td>number
437                         </table>
438                 </dl>
439         </div>
440         
441         <p>The <a href="#propdef-volume" class="noxref">
442         <span class="index-def" title="volume">'volume'</span></a> refers to the
443         volume of the waveform from 0 to 1.0.</p>
444         
445         <p>Values have the following meanings:</p>
446         
447         <dl>
448                 <dt><span class="index-inst" title="&lt;number&gt;">
449                                 <a name="x11" href="http://www.w3.org/TR/CSS21/syndata.html#value-def-number" class="noxref">
450                                 <span class="value-inst-number"><strong>&lt;number&gt;</strong></span></a>
451                         </span>
452                         <dd>Any number between '0' and '1.0'. '0' represents silence and 1.0 
453                         represents full volume.
454
455                 <dt><span class="index-inst" title="&lt;percentage&gt;"><a name="x12" href="http://www.w3.org/TR/CSS21/syndata.html#value-def-percentage" class="noxref">
456                         <span class="value-inst-percentage"><strong>&lt;percentage&gt;</strong></span></a></span>
457                         <dd>Percentage values are calculated relative to the inherited value,
458                         and are then clipped to the range '0' to '1.0'.
459
460                 <dt><strong>silent</strong>
461                         <dd>No sound at all. Same as '0'.
462
463                 <dt><strong>low</strong>
464                         <dd>Same as '0.25'.
465
466                 <dt><strong>medium</strong>
467                         <dd>Same as '0.50'.
468
469                 <dt><strong>high</strong>
470                         <dd>Same as '0.75'.
471
472                 <dt><strong>full-volume</strong>
473                         <dd>Same as '1.0'.
474         </dl>
475
476         <p>User agents should allow the values corresponding to '0' and '1.0' to be set by the listener.
477         No one setting is universally applicable; suitable values depend on the equipment in use
478         (speakers, headphones), the environment (in car, home theater, library) and personal
479         preferences. </p>
480
481
482         <h4>3.9 Shorthand media timing property<a name="propdef-media-timing" href="#propdef-media-timing" class="noxref">
483         <span class="propinst-media-timing">'media-timing'</span></a></h4>
484         
485         <div class="propdef">
486                 <dl><dt>
487                 <span class="index-def" title="'media-timing'"><a name="propdef-media-timing" class="propdef-title"><strong>'media-timing'</strong></a></span>
488                         <dd>
489                         <table class="propinfo">
490                                 <tr ><td><em>Value:</em>&nbsp;&nbsp;<td>
491                                          [<a href="#propdef-media-play-state"><span class="propinst-media-play-state">'media-play-state'</span></a>
492                                         || <a href="#propdef-media-start-time"><span class="propinst-media-start-time">'media-start-time'</span></a>
493                                         || <a href="#propdef-media-end-time"><span class="propinst-media-end-time">'media-end-time'</span></a>
494                                         || <a href="#propdef-media-loop-count"><span class="propinst-media-loop-count">'media-loop-count'</span></a>
495                                         || <a href="#propdef-media-loop-start-time"><span class="propinst-media-loop-start-time">'media-loop-start-time'</span></a>
496                                         || <a href="#propdef-media-loop-end-time"><span class="propinst-media-loop-end-time">'media-loop-end-time'</span></a>
497                                         || <a href="#propdef-media-play-rate"><span class="propinst-media-play-rate">'media-play-rate'</span></a>]
498                                         | inherit
499                                 <tr><td><em>Initial:</em>&nbsp;&nbsp;<td>see individual properties
500                                 <tr><td><em>Applies to:</em>&nbsp;&nbsp;<td>timed media elements
501                                 <tr><td><em>Inherited:</em>&nbsp;&nbsp;<td>no
502                                 <tr><td><em>Percentages:</em>&nbsp;&nbsp;<td>see individual properties
503                                 <tr><td><em>Media:</em>&nbsp;&nbsp;<td>visual, audio
504                                 <tr><td><em>Computed&nbsp;value:</em>&nbsp;&nbsp;<td>see individual properties
505                         </table>
506                 </dl>
507         </div>
508
509         <p>The <a href="#propdef-media-timing" class="noxref">
510         <span class="propinst-media-timing">'media-timing'</span></a> is a shorthand property for
511         setting the individual media properties (i.e., 
512         <a href="#propdef-media-play-state"><span class="propinst-media-play-state">'media-play-state'</span></a>,
513         <a href="#propdef-media-start-time"><span class="propinst-media-start-time">'media-start-time'</span></a>,
514         <a href="#propdef-media-end-time"><span class="propinst-media-end-time">'media-end-time'</span></a>,
515         <a href="#propdef-media-loop-count"><span class="propinst-media-loop-count">'media-loop-count'</span></a>,
516         <a href="#propdef-media-loop-start-time"><span class="propinst-media-loop-start-time">'media-loop-start-time'</span></a>,
517         <a href="#propdef-media-loop-end-time"><span class="propinst-media-loop-end-time">'media-loop-end-time'</span></a>,
518         and <a href="#propdef-media-play-rate"><span class="propinst-media-play-rate">'media-play-rate'</span></a>) at the same place in the
519         style sheet. Given a valid declaration, the 
520         <a href="#propdef-media-timing"><span class="propinst-media-timing">'media-timing'</span></a>
521         property first sets all the individual media properties to their initial values, then assigns
522         explicit values given in the declaration.</p>
523
524         <p>In the first rule of the following example, only a value for 'media-timing' has been given
525         and the other individual properties are set to their initial value. In the second rule, all
526         individual properties have been specified.</p>
527         
528         <pre>
529 audio.ambient { media-timing: playing; }
530         </pre>
531
532         <pre>
533 movie#main { media-timing: playing 0s -0.5s 2 2s -4s 1 }
534         </pre>
535
536         <h2 class=no-num id=references>References</h2>
537                 <p class=big-issue>Coming soon</p>
538         
539         <h2 class=no-num id=acknowledgements>Acknowledgements</h2>
540                 <p class=big-issue>Coming soon</p>
541         
542 </body>
543 </html>