CODEWITHSUNDEEP
css
Luka
Luka

Reputation: 3089

What is the valid range for numbers in CSS

I have searched the internet and it seems very hard to find this info.

When I do

  div {
    width: calc(1e-10 * 1e12px);
  }

It sets the width to 100px. But when I do

  div {
    width: calc(1e-1000 * 1e1002px);
  }

It fails. Clearly, 1e1002 is out of range.

What is the valid range of numbers in CSS? Does it depend on the unit? Is it browser specific?

Upvotes: 2

Views: 157

Answers (1)

TylerH
TylerH

Reputation: 21098

It is up to each browser to pick limits for CSS real numbers. The spec supports a theoretically infinite range but relies on vendors to provide 'reasonable' support.

4.1. Range Restrictions and Range Definition Notation

Properties can restrict numeric values to some range. If the value is outside the allowed range, then unless otherwise specified, the declaration is invalid and must be ignored.

[...]

CSS theoretically supports infinite precision and infinite ranges for all value types; however in reality implementations have finite capacity. UAs should support reasonably useful ranges and precisions. Range extremes that are ideally unlimited are indicated using ∞ or −∞ as appropriate.

Soruce: https://www.w3.org/TR/css-values-3/#numeric-ranges

See also:

4.3. Real Numbers: the <number> type

Number values are denoted by <number>, and represent real numbers, possibly with a fractional component.

When written literally, a number is either an integer, or zero or more decimal digits followed by a dot (.) followed by one or more decimal digits and optionally an exponent composed of "e" or "E" and an integer. It corresponds to the <number-token> production in the CSS Syntax Module [CSS3SYN]. As with integers, the first character of a number may be immediately preceded by - or + to indicate the number’s sign.

Source: https://www.w3.org/TR/css-values-3/#numbers

Upvotes: 1

Related Questions