How many digits after the decimal point are interpreted in stylesheet rules?

Question

So recently I stumbled across this answer's CSS:

larger {
    width: 66.66666666%;
}

smaller {
    width: 33.333333333%;
}

Which got me thinking: How much digits are really interpreted from browsers using stylecheets? As I fail to see a difference already when using 4 digits in Chrome.

I have set up an example on JsFiddle using the following code:

CSS:

body, div {
    width: 100%;
    min-height:2em;
    margin:0px;
    padding:0px;
    white-space: nowrap;
    font-family: monospace;
}
.left {
    display:inline-block;
    background: green;
    float:right;
}
.right {
    display:inline-block;
    background: blue;
    float:left;
}
.zero .left {
    width: 33%;
}
.zero .right {
    width: 66%;
}
.two .left {
    width: 33.33%;
}
.two .right {
    width: 66.33%;
}
.four .left {
    width: 33.3333%;
}
.four .right {
    width: 66.6666%;
}
.eight .left {
    width: 33.33333333%;
}
.eight .right {
    width: 66.66666666%;
}

HTML:

<div class='zero'>
    <div class='left'>33</div>
    <div class='right'>66</div>
</div>
<div class='two'>
    <div class='left'>33.33</div>
    <div class='right'>66.66</div>
</div>
<div class='four'>
    <div class='left'>33.3333</div>
    <div class='right'>66.6666</div>
</div>
<div class='eight'>
    <div class='left'>33.33333333</div>
    <div class='right'>66.66666666</div>
</div>

Answer 1

It's really going to depend on your screen. The smallest picture element is the pixel (hence its name); since all sizes are going to be converted into pixels in the end, percentages are constrained that way.

If your screen width is 2048 pixels, then the smallest percentage increment that can be used is around 0.05%.

I'm guessing you must have a pretty big screen if you can discern the difference at the 4th decimal place!

| Width | Minimum percent |
---------------------------
| 2048  |      0.048%     |
| 1024  |      0.098%     |
|  800  |      0.125%     |
|  768  |      0.130%     |
|  640  |      0.156%     |
|  600  |      0.166%     |
|  480  |      0.208%     |
---------------------------

NOTE

Actually, it'll depend on more than your screen. If you have a div that is 10px wide and you try to create a div inside it using decimals, you're not going to be able to see difference between, say, 10% and 12%. You may see a difference at 16%, but that's due to rounding... The principle is the same, it's just the region that you're dividing over is smaller so the differences between percentage points cannot be seen.