Open LeaVerou opened 4 years ago
Most of this seems to be fairly straightforward:
background
, background-image
, cursor
, list-style-image
, border-image
, content
and custom properties*-gradient
functions, and count which properties they were found into bottom right
), also there are midpoints which are not a color stop. In fact, we may want to count usage of midpoints, I added it to the first post.0
(newer method).Regarding "How many color stops do they use on average?" it's not clear what the value of avg_stops
is in the JS and how it's intended to be aggregated, eg page-level stats.
I also see hints
and max_stops
properties in the JS but it's not clear which of the questions it's measuring.
And it's not clear which JS property should be used for "How frequently are midpoints used?".
{
"functions": {
"repeating-conic-gradient": 2,
"linear-gradient": 1
},
"properties": {
"background": 3
},
"two_positions": 0,
"hints": 0,
"hard_stops": 0,
"max_stops": null,
"avg_stops": null
}
@LeaVerou can you clarify?
avg_stops
is average number of color stops per gradient on the page. I just added a median, and the full list of counts, in case we'd prefer to aggregate via SQL only.
I see max stops is not in the list of questions indeed. I still think it would be fun to see the distribution, or perhaps the max number of stops across the entire corpus, it's the same kind of fun statistic as max z-index or max specificity. I've just added code that tracks the gradient code as well so we can see what gradient has the most color stops. I suspect it will be generated but eh. 🤷🏽♀️
Hints and midpoints are the same thing; the former is CSS spec terminology and the latter Photoshop terminology.