<time>

  • Revision slug: Web/CSS/time
  • Revision title: time
  • Revision id: 462109
  • Created:
  • Creator: FredB
  • Is current revision? No
  • Comment

Revision Content

{{ CSSRef() }}

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 does 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 unit (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 a <time>, it must have a unit
7 ms        No space is allowed between the <number> and the unit

Specifications

Specification Status Comment

{{ SpecName('CSS3 Value','#time','<time>') }}

{{ Spec2('CSS3 Values') }} Normatively defined s and ms

{{ SpecName('CSS2.1','aural.html#times','<time>') }}

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() }} {{ CompatNo() }} {{ CompatUnknown() }}

See also

Revision Source

<p>{{ CSSRef() }}</p>
<h2 id="Summary">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><a id="s">s</a></code> which represents a time in seconds. E.g. <code>0s</code>, <code>1.5s</code>, <code>-60s</code>.</li>
  <li><code><a id="ms">ms</a></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 <code>0</code>, the unit may not be omitted in that case as it isn't a {{ xref_csslength() }}: <code>0</code> is invalid and does not represent <code>0s</code>, <code>0ms</code>.</p>
<h2 id="Examples">Examples</h2>
<p>These are valid time values:</p>
<pre>
12s&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Positive integer
-456ms&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Negative integer
4.3ms       Non-integer
14mS&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; The unit is case-insensitive, though capital letters are not recommended for s and ms.
+0s&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Zero, with a leading + and the unit
-0ms        Zero, with a leading - and the unit (Though strange, this is an allowed value)
</pre>
<p>These are invalid time values:</p>
<pre>
0&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; While unitless zero is allowed for &lt;length&gt;, it's invalid for all other units.
12.0&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; This is a <a href="mks://localhost/en/CSS/number" title="en/CSS/number">&lt;number&gt;</a>, not a &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 id="Specifications" name="Specifications">Specifications</h2>
<table class="standard-table">
  <thead>
    <tr>
      <th scope="col">Specification</th>
      <th scope="col">Status</th>
      <th scope="col">Comment</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <p>{{ SpecName('CSS3 Value','#time','&lt;time&gt;') }}</p>
      </td>
      <td>{{ Spec2('CSS3 Values') }}</td>
      <td>Normatively defined <code>s</code> and <code>ms</code></td>
    </tr>
    <tr>
      <td>
        <p>{{ SpecName('CSS2.1','aural.html#times','&lt;time&gt;') }}</p>
        <p><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></p>
      </td>
      <td>{{ Spec2('CSS2.1') }}</td>
      <td>Informatively defined <code>s</code> and <code>ms</code></td>
    </tr>
  </tbody>
</table>
<h2 id="Browser_compatibility">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</td>
        <td>10.5 (2.3)</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>{{ CompatNo() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
    </tbody>
  </table>
</div>
<h2 id="See_also">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