<number> CSS type
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
The <number> CSS data type represents a number, being either an integer, a number with a fractional component, or a base-ten exponent in scientific notation.
Syntax
The syntax of <number> extends the syntax of <integer>. A fractional value is represented by a . followed by one or more decimal digits, and may be appended to an integer. A <number> can also end with the letter e or E followed by an integer, which indicates a base-ten exponent in scientific notation. There is no unit associated with numbers.
As with integers, the first character of the number can be immediately preceded by - or + to indicate the number's sign: whether the number is positive or negative.
Interpolation
When animated, values of the <number> CSS data type are interpolated as real, floating-point numbers. The speed of the interpolation is determined by the easing function associated with the animation.
Examples
Valid numbers
12 A raw <integer> is also a <number>. 4.01 Positive fraction -456.8 Negative fraction 0.0 Zero +0.0 Zero, with a leading + -0.0 Zero, with a leading - .60 Fractional number without a leading zero 10e3 Scientific notation -3.4e-2 Complicated scientific notation
Invalid numbers
12. Decimal points must be followed by at least one digit. +-12.2 Only one leading +/- is allowed. 12.1.1 Only one decimal point is allowed.
Specifications
| Specification |
|---|
| CSS Values and Units Module Level 4 # numbers |
Browser compatibility
| desktop | mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
<number>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Scientific notation
|
|
|
|
|
|
|
|
|
|
|
|
|
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
See also
<integer><ratio>- CSS values and units module