3

My question is, simply, how many (non-zero) decimal places can I include in a value I use in a CSS stylesheet before the browser rounds the number when interpreting it?

NOTE: I am aware that any decimal pixels are rounded (differently by different browsers) because the screens cannot display sub-pixel units. What I am asking is before that rounding takes place, what number of decimal places will be retained to begin performing the final browser rendering calculations/roundings.

10
  • why do you have to use decimals in CSS ?
    – Raptor
    Sep 19, 2014 at 1:57
  • 1
    I've seen a lot of CSS wireframes which make use of the "Golden Ratio" which is an irrational number (non-repeating, infinite decimal) which I would like to get as accurate as possible in percentage dimensions.
    – papiro
    Sep 19, 2014 at 1:59
  • 4
    This is entirely implementation-dependent. CSS itself places no arbitrary restrictions - it has no reason to.
    – BoltClock
    Sep 19, 2014 at 2:02
  • 1
    In addition, those percentages will have to be transformed to pixels to draw on your screen and at some point the extra precision at the sub-pixel level won't have an effect. In your example, if we assumed a height of 768 pixel, the difference between 161.8033989% and 161.8% is 0.02 pixels, which the browser might have some trouble differentiating for you...
    – ssnobody
    Sep 19, 2014 at 2:06
  • 2
    What exactly is your goal for having this degree of accuracy? Sep 19, 2014 at 2:16

1 Answer 1

5

Be it truncation or rounding, in an ideal world, neither of these things should happen. The spec simply says that a numeric value may either consist of

  • one or more digits, or
  • any number of digits, followed by a period for the decimal point, followed by one or more digits.

The spec even accounts for the fact that the leading zero before the decimal point in a value that's less than 1 is not significant and can thus be omitted, e.g. opacity: .5. But there is quite simply no theoretical upper limit.

But, due to implementation limitations, browsers will often "round" values for the purposes of rendering. This is not something you can control other than by changing the precision of your values, and even so, this behavior can vary between browsers, for obvious reasons, and is therefore something you cannot rely on.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.