Gradient stats

[LeaVerou]

• How commonly used is each type of gradient (linear, radial, conic)?
• How many color stops do they use on average?
• How many use hard stops? (two color stops at the same position)
• How frequently are they used on properties other than background-image?
• How frequently are midpoints used?
• How frequently are two position color stops used?

[LeaVerou]

Most of this seems to be fairly straightforward:

1. Traverse values of background, background-image, cursor, list-style-image, border-image, content and custom properties
2. Extract uses of *-gradient functions, and count which properties they were found in
3. Counting color stops needs some light parsing. Counting number of arguments is not sufficient, often the first argument is params (e.g. to 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.
4. Hard stops are very nontrivial in the general case, but we want to measure intentional usage, which tends to follow specific patterns: either the positions are identical (older method), or the second position is 0 (newer method).

[rviscomi]

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?

[LeaVerou]

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.