<time>

  • Revision slug: CSS/time
  • Revision title: time
  • Revision id: 15420
  • Created:
  • Creator: teoli
  • Is current revision? No
  • Comment 20 words added, 3 words removed

Revision Content

Summary

The <time> CSS data type denotes time dimensions expressed in seconds or milliseconds. They consists of a {{ Xref_cssnumber() }} immediately followed by the unit. Like for any CSS dimension, there is no space between the unit literal and the number.

The following units may be used :

  • s which represents a time in seconds. E.g. 0s, 1.5s, -60s.
  • ms which represents a time in milliseconds. E.g. 0ms, 1500ms, -60000ms.

Conversion between s and ms follows the logical 1s = 1000ms.

Even if all units represent the same time for the value 0, the unit may not be omitted in that case as it isn't a {{ xref_csslength() }}: 0 is invalid and do not represent 0s, 0ms.

Examples

These are valid time values:

12s         Positive integer
-456ms      Negative integer
4.3ms       Non-integer
14mS        The unit is case-insensitive, though capital letters are not recommended for s and ms.
+0s         Zero, with a leading + and the unit
-0ms        Zero, with a leading - and the unt(Though strange, this is an allowed value)

These are invalid time values:

0           While unitless zero is allowed for <length>, it's invalid for all other units.
12.0        This is a <number>, not an <time>, it must have a unit
7 ms        No space is allowed between the <number> and the unit

Specifications

Specification Status Comment
CSS Values and Units Level 3 {{ Spec2('CSS3 Values') }} Normatively defined s and ms
CSS Level 2 (Revision 1) {{ Spec2('CSS2.1') }} Informatively defined s and ms

Browser compatibility

{{ CompatibilityTable() }}

Feature Chrome (Webkit) Firefox (Gecko) Internet Explorer Opera (Presto) Safari (Webkit)
Basic support <=11 (?) 4.0 (2.0) 9.0 10.5 (2.3) <=3.2 (?)
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} no {{ CompatUnknown() }}

See also

Revision Source

<h2>Summary</h2>
<p>The <code>&lt;time&gt;</code> <a href="/en/CSS" title="CSS">CSS</a> data type denotes time dimensions expressed in seconds or milliseconds. They consists of a {{ Xref_cssnumber() }} immediately followed by the unit. Like for any CSS dimension, there is no space between the unit literal and the number.</p>
<p>The following units may be used :</p>
<ul> <li><code>s</code> which represents a time in seconds. E.g. <code>0s</code>, <code>1.5s</code>, <code>-60s</code>.</li> <li><code>ms</code> which represents a time in milliseconds. E.g. <code>0ms</code>, <code>1500ms</code>, <code>-60000ms</code>.</li>
</ul>
<p>Conversion between <code>s</code> and <code>ms</code> follows the logical <code>1s</code> = <code>1000ms</code>.</p>
<p>Even if all units represent the same time for the value 0, the unit may not be omitted in that case as it isn't a {{ xref_csslength() }}: <code>0</code> is invalid and do not represent <code>0s</code>, <code>0ms</code>.</p><h2>Examples</h2>
<p>These are valid time values:</p>
<pre>12s         Positive integer
-456ms      Negative integer
4.3ms       Non-integer
14mS        The unit is case-insensitive, though capital letters are not recommended for s and ms.
+0s         Zero, with a leading + and the unit
-0ms        Zero, with a leading - and the unt(Though strange, this is an allowed value)
</pre>
<p>These are invalid time values:</p>
<pre>0           While unitless zero is allowed for &lt;length&gt;, it's invalid for all other units.
12.0        This is a <a href="mks://localhost/en/CSS/number" title="en/CSS/number">&lt;number&gt;</a>, not an &lt;time&gt;, it must have a unit
7 ms        No space is allowed between the <a href="mks://localhost/en/CSS/number" title="en/CSS/number">&lt;number&gt;</a> and the unit
</pre>
<h2 name="Specifications">Specifications</h2>
<table class="standard-table"> <thead> <tr style="background-color: rgb(255, 204, 255);"> <th scope="col">Specification</th> <th scope="col">Status</th> <th scope="col">Comment</th> </tr> </thead> <tbody> <tr> <td><a class="external" href="http://www.w3.org/TR/css3-values/#time" title="http://www.w3.org/TR/css3-values/#time">CSS Values and Units Level 3</a></td> <td>{{ Spec2('CSS3 Values') }}</td> <td>Normatively defined <code>s</code> and <code>ms</code></td> </tr> <tr> <td><a class="external" href="http://www.w3.org/TR/CSS2/aural.html#times" title="http://www.w3.org/TR/CSS2/aural.html#times">CSS Level 2 (Revision 1)</a></td> <td>{{ Spec2('CSS2.1') }}</td> <td>Informatively defined <code>s</code> and <code>ms</code></td> </tr> </tbody>
</table>
<h2>Browser compatibility</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop"> <table class="compat-table"> <tbody> <tr> <th>Feature</th> <th>Chrome (Webkit)</th> <th>Firefox (Gecko)</th> <th>Internet Explorer</th> <th>Opera (Presto)</th> <th>Safari (Webkit)</th> </tr> <tr> <td>Basic support</td> <td>&lt;=11 (?)</td> <td>4.0 (2.0)</td> <td>9.0 <a class="external" href="http://msdn.microsoft.com/en-us/library/cc351024%28v=vs.85%29.aspx#values" title="http://msdn.microsoft.com/en-us/library/cc351024%28v=vs.85%29.aspx#values"></a></td> <td>10.5 (2.3) <a class="external" href="http://www.opera.com/docs/specs/presto23/" title="http://www.opera.com/docs/specs/presto23/"></a></td> <td>&lt;=3.2 (?)</td> </tr> </tbody> </table>
</div>
<div id="compat-mobile"> <table class="compat-table"> <tbody> <tr> <th>Feature</th> <th>Android</th> <th>Firefox Mobile (Gecko)</th> <th>IE Mobile</th> <th>Opera Mobile</th> <th>Safari Mobile</th> </tr> <tr> <td>Basic support</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> <td>no</td> <td>{{ CompatUnknown() }}</td> </tr> </tbody> </table>
</div>
<h2>See also</h2>
<ul> <li><a href="/en/CSS/CSS_Reference" title="CSS Reference">CSS Reference</a> index</li> <li>CSS Data Types : {{ CSSDataTypes() }}</li>
</ul>
Revert to this revision