CSS - <number>
The <number> CSS data type represents a number, either integer or fractional. Its syntax extends the one of the <integer> data value. To represent a fractional value, add the fractional part — a '.' followed by one or several decimal digits — to any <integer> data value. Like for <integer> data type, there isn't any unit associated to a <number>, which is not a CSS dimension.
Example
These are valid number values:
12 A raw <a href="css/integer"><integer></a> is also a <number> 4.01 A positive non-integer <number> -456.8 Negative non-integer <number> 0.0 Zero +0.0 Zero, with a leading + -0.0 Zero, with a leading - (Though strange, this is an allowed value) .60 Digits are optional before the dot 10e3 The scientific notation is allowed -3.4e-2 Most complex case of scientific notation
These are invalid number values:
12. The dot should be followed by a number +-12.2 Only one leading +/- is allowed 12.1.1 Only one dot is allowed
Description
The <number> CSS data type represents a number, either integer or fractional. Its syntax extends the one of the <integer> data value. To represent a fractional value, add the fractional part — a '.' followed by one or several decimal digits — to any <integer> data value. Like for <integer> data type, there isn't any unit associated to a <number>, which is not a CSS dimension.
Browser Compatibility
| Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
|---|---|---|---|---|---|
| Basic support | 1.0 | 1.0 (1.0) | 5.0 | (Yes) | 1.0 (85) |
| Scientific notation | 43.0 | 29 | 11 | ? | ? |
| Feature | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| Basic support | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) |
| Scientific notation | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) |
Specifications
| Specification | Status | Comment |
|---|---|---|
| CSS Values and Units Module Level 3 The definition of '<number>' in that specification. |
Candidate Recommendation | No significant change from CSS Level 2 (Revision 1) |
| CSS Level 2 (Revision 1) The definition of '<number>' in that specification. |
Recommendation | Explicitly defined |
| CSS Level 1 The definition of '<number>' in that specification. |
Recommendation | Implicitly defined |
Values of the <number> CSS data type can be interpolated in order to allow animations. In that case they are interpolated as real, floating-point, numbers. The speed of the interpolation is determined by the timing function associated with the animation.
License
© 2016 Mozilla Contributors
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-us/docs/web/css/number