Add progress bar in incomplete properties

[Zefling]

To make the progression more visual.

[LeaVerou]

I do not understand what this progress bar is showing. Also, it's extremely subtle (which may or may not be ok depending on what it's depicting).

[SebastianZ]

@LeaVerou If I understand the change correctly, the progress bar is just another visual representation for how much of a feature is covered by a browser besides the smileys and the colors.

I just checked out the branch locally and I can see the progress bars, though I think they could be made a little more visible.

Sebastian

[LeaVerou]

I wonder if we should make the progress bar more prominent (by not having it as a background, but as a line at the top of each element) and remove the smiley faces, which are harder to quantify.

[Zefling]

Like this?

[LeaVerou]

Yes, except I think it would look better on top instead of bottom (also try increasing the padding a bit on the side with the progress bar)

[Zefling]

If anyone has better to suggest.

[LeaVerou]

I still think a thin progress bar on top would be better than a background one, and would allow stronger contrast too.

[Zefling]

Update for this:

[LeaVerou]

LGTM visually. I think the code would be quite simplified if instead of using an extra element, you used a background image. You can pass in the progress via a CSS variable, then the rest can be in CSS.

You can do something like linear-gradient(rgb(0 0 0 / .3), rgb(0 0 0 / .3)) no-repeat 0 0 / calc(var(--progress) * 1%) .2em) for the effect I see above.

[Zefling]

Isn't it a problem if it doesn't work on old browsers?

[Zefling]

With CSS var :

[LeaVerou]

Isn't it a problem if it doesn't work on old browsers?

No, since this is an additional way to communicate the result, not something essential. As long as nothing breaks in older browsers, we're good.

Also note that CSS variables are supported in pretty much every browser in use today except IE11 and Opera Mini. We're talking 95% of Web users. https://caniuse.com/css-variables

[Zefling]

Ok, It's done. ;)

[SebastianZ]

Three notes:

1. Firefox obviously has rounding issues for the width of the progress bar. Sometimes it's 7px wide, sometimes 6px. This causes the bar to look a little bit odd. Maybe just use px instead?

2. Chrome and Firefox differ regarding the width of the progress bar. In Chrome it's always 5px for me, in Firefox it's one or two pixels wider. @LeaVerou This looks like a bug in Chrome to me. font-size has a computed value of 16px in both browsers for me. And the 0.4em for background-size correctly result in 6.4px as computed value in Firefox, though it is 4.8px in Chrome. Any idea why? That issue aside, the bar looks a little too wide for my taste. It should rather be 4px or max. 5px, also to avoid the issue mentioned above.

3. You may want to increase the top padding a little (maybe by 0.1em or 0.2em) like Lea mentioned earlier. This will make the text look vertically centered again (except for cases with 0% implementation).

Sebastian

[SebastianZ]

@Zefling Now that we've done several big changes, there's a conflict in csstest.js. Any chance you could rebase your changes and incorporate the latest feedback so we can finally merge this PR?

Sebastian

[Zefling]

I changed to .2em

It's true, the padding is not good in Chromium:

[SebastianZ]

If I choose a padding of 0.6em instead of 0.7em, it seems fine to me in Chrome and Firefox.

I still get the rounding errors in Firefox (compare the width of the bar for border-top-right-radius and border-bottom-right-radius) but I think it's not a show-stopper.

So with the change of the padding I believe this is good to go.

Sebastian

[Zefling]

Is it better?

[SebastianZ]

Yes, works for me. Thank you!

Sebastian