<integer>

  • Revision slug: Web/CSS/integer
  • Revision title: integer
  • Revision id: 494231
  • Created:
  • Creator: kscarfone
  • Is current revision? No
  • Comment Updated tags

Revision Content

{{CSSRef}}

Summary

The <integer> CSS data type denotes an integer number, positive or negative. There isn't any associated unit with the value. An integer consists of one or several decimal digit, 0 to 9, eventually preceded by one single + or - sign.

Integers are used in numerous CSS properties, e. g. {{cssxref("z-index")}}, {{cssxref("line-height")}}, {{cssxref("counter-increment")}}, {{Cssxref("column-count")}}.

Also any <integer> CSS value is also a {{Xref_cssnumber}} CSS value, though the converse is not true.

There is no official range of valid <integer> values. Opera supports values up to 215-1, IE up to 220-1 and other browsers even higher. During the CSS3 Values cycle there were a lot of discussion about setting a minimal limit to support: the latest decision, in April 2012 during the LC phase, was [-227-1; 227-1] # but other values like 224-1 and 230-1 were also proposed # #. The latest Editor's draft doesn't list a limit anymore.

Interpolation

Values of the <integer> CSS data type can be interpolated in order to allow animations. In that case they are interpolated via integer discrete steps. The calculation is done as if they were real, floating-point numbers and the discrete value is obtained using the floor function. The speed of the interpolation is determined by the timing function associated with the animation.

Examples

These are valid integer values:

12          Positive integer (without a leading + sign)
+123        Positive integer (with a leading + sign)
-456        Negative integer
0           Zero
+0          Zero, with a leading +
-0          Zero, with a leading - (Though strange, this is an allowed value)

These are invalid integer values:

12.0        This is a <number>, not an <integer>, though it represents an integer
12.         The dot should not be part of an <integer>
+---12      Only one leading +/- is allowed
ten         Letters are not allowed
_5          Special characters are not allowed
\35         Escaped Unicode characters are not allowed, even if they are an integer (here: 5)
\4E94       Non-arabic numerals are not allowed, even escaped (here: the Japanese 5, 五)

Specifications

Specification Status Comment
{{SpecName('CSS3 Values', '#integers', '<integer>')}} {{Spec2('CSS3 Values')}} No significant change from CSS Level 2 (Revision 1)
{{SpecName('CSS2.1', 'syndata.html#numbers', '<integer>')}} {{Spec2('CSS2.1')}} Explicitly defined
{{SpecName('CSS1', '', '<integer>')}} {{Spec2('CSS1')}} Implicitly defined

Browser compatibility

{{CompatibilityTable}}
Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
basic 1.0 1.0 (1.0) 3.0 yes 1.0 (85)
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support yes yes yes yes yes

See also

  • CSS Data Types : {{CSSDataTypes}}

Revision Source

<div>
 {{CSSRef}}</div>
<h2 id="Summary" name="Summary">Summary</h2>
<p>The <code>&lt;integer&gt;</code> <a href="/en-US/docs/CSS" title="CSS">CSS</a> data type denotes an integer number, positive or negative. There isn't any associated unit with the value. An integer consists of one or several decimal digit, 0 to 9, eventually preceded by one single + or - sign.</p>
<p>Integers are used in numerous CSS properties, e. g. {{cssxref("z-index")}}, {{cssxref("line-height")}}, {{cssxref("counter-increment")}}, {{Cssxref("column-count")}}.</p>
<p>Also any <code>&lt;integer&gt;</code> CSS value is also a {{Xref_cssnumber}} CSS value, though the converse is not true.</p>
<div class="note">
 There is no official range of valid <code>&lt;integer&gt;</code> values. Opera supports values up to 2<sup>15</sup>-1, IE up to 2<sup>20</sup>-1 and other browsers even higher. During the CSS3 Values cycle there were a lot of discussion about setting a minimal limit to support: the latest decision, in April 2012 during the LC phase, was [-2<sup>27</sup>-1;&nbsp;2<sup>27</sup>-1] <a href="http://lists.w3.org/Archives/Public/www-style/2012Apr/0633.html" title="http://lists.w3.org/Archives/Public/www-style/2012Apr/0633.html">#</a> but other values like 2<sup>24</sup>-1 and 2<sup>30</sup>-1 were also proposed <a href="http://lists.w3.org/Archives/Public/www-style/2012Apr/0530.html" title="http://lists.w3.org/Archives/Public/www-style/2012Apr/0530.html">#</a> <a href="http://lists.w3.org/Archives/Public/www-style/2012Apr/0530.html" title="http://lists.w3.org/Archives/Public/www-style/2012Apr/0530.html">#</a>. The latest Editor's draft doesn't list a limit anymore.</div>
<h2 id="Interpolation">Interpolation</h2>
<p>Values of the <code>&lt;integer&gt;</code> CSS data type can be interpolated in order to allow animations. In that case they are interpolated via integer discrete steps. The calculation is done as if they were real, floating-point numbers and the discrete value is obtained using the <a href="http://en.wikipedia.org/wiki/Floor_function" title="http://en.wikipedia.org/wiki/Floor_function">floor function</a>. The speed of the interpolation is determined by the <a href="/en-US/docs/CSS/timing-function" title="timing-function">timing function</a> associated with the animation.</p>
<h2 id="Examples">Examples</h2>
<p>These are valid integer values:</p>
<pre>
12&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Positive integer (without a leading + sign)
+123&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Positive integer (with a leading + sign)
-456&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Negative integer
0&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Zero
+0&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Zero, with a leading +
-0          Zero, with a leading - (Though strange, this is an allowed value)
</pre>
<p>These are invalid integer values:</p>
<pre>
12.0&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; This is a <a href="mks://localhost/en/CSS/number" title="CSS/number">&lt;number&gt;</a>, not an &lt;integer&gt;, though it represents an integer
12.         The dot should not be part of an &lt;integer&gt;
+---12&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Only one leading +/- is allowed
ten&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Letters are not allowed
_5&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Special characters are not allowed
\35         Escaped Unicode characters are not allowed, even if they are an integer (here: 5)
\4E94&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Non-arabic numerals are not allowed, even escaped (here: the Japanese 5, 五)
</pre>
<h2 id="Specifications">Specifications</h2>
<table class="standard-table">
 <thead>
  <tr>
   <th>Specification</th>
   <th>Status</th>
   <th>Comment</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('CSS3 Values', '#integers', '&lt;integer&gt;')}}</td>
   <td>{{Spec2('CSS3 Values')}}</td>
   <td>No significant change from CSS Level 2 (Revision 1)</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS2.1', 'syndata.html#numbers', '&lt;integer&gt;')}}</td>
   <td>{{Spec2('CSS2.1')}}</td>
   <td>Explicitly defined</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS1', '', '&lt;integer&gt;')}}</td>
   <td>{{Spec2('CSS1')}}</td>
   <td>Implicitly defined</td>
  </tr>
 </tbody>
</table>
<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2>
<div>
 {{CompatibilityTable}}</div>
<div id="compat-desktop">
 <table class="compat-table">
  <tbody>
   <tr>
    <th>Feature</th>
    <th>Chrome</th>
    <th>Firefox (Gecko)</th>
    <th>Internet Explorer</th>
    <th>Opera</th>
    <th>Safari (WebKit)</th>
   </tr>
   <tr>
    <td>basic</td>
    <td>1.0</td>
    <td>1.0 (1.0)</td>
    <td>3.0</td>
    <td>yes</td>
    <td>1.0 (85)</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 Phone</th>
    <th>Opera Mobile</th>
    <th>Safari Mobile</th>
   </tr>
   <tr>
    <td>Basic support</td>
    <td>yes</td>
    <td>yes</td>
    <td>yes</td>
    <td>yes</td>
    <td>yes</td>
   </tr>
  </tbody>
 </table>
</div>
<h2 id="See_also">See also</h2>
<ul>
 <li>CSS Data Types : {{CSSDataTypes}}</li>
</ul>
Revert to this revision