What is the maximum precision of CSS3 opacity?

Question

So I've been just generating opacity for interactive fading.

I think however, that it's not a good idea to use unrounded values for opacity. If the maximum precision is lower than maximum javascript in precision, the browsers seem to round the value, but consider it changed.

So the question is, what is the maximum precision that makes sense for CSS3 opacity?

Answer 1

Opacity allows for basically any number of decimals you'd like, but the issue is that HTML can only ever change its lightness in 256 different ways. So, the most sensitive opacity would be in something black over something white, which would have a visible variety of 256 different hues. This is because the ratio between R, G, and B must always stay the same to maintain the same colour.

So, since the most sensitive colour has 256 different values, the smallest change that would have an effect on the visible output would be 1/256 = 0.00390625. In theory, that should be the minimum step size for increasing your opacity.

I've tested this, and using a simple colour picker I noticed that in this example fiddle, the bottom div was the only one which had any change of colour. The top 2 divs had the colour #000000, and the bottom div had the colour #010101. So, I would say, based on this, that:

1. The entered values are not rounded, or if they are, they are always rounded down (floor function)
2. The maximum sensitivity for opacity is 3 decimals.

It should be noted that this was all tested in Google Chrome, and like BoltClock said, this might vary per implementation.