LeaVerou / css-almanac

Repo for planning & voting on which stats to study
https://projects.verou.me/mavoice/?repo=leaverou/css-almanac&labels=proposed%20stat
33 stars 3 forks source link

Ways CSS is applied to the page #17

Open LeaVerou opened 4 years ago

LeaVerou commented 4 years ago

I'd like to see how CSS is applied to a page: style attribute, <style> element and/or the <link> element. Besides <link>, I'd expect numbers to be quite high on <style> elements mostly due to the critical CSS recommended practice.

(by @catalinred)

Added by @leaverou: It would also be interesting to measure how much inline CSS (style attribute) is used on pages.

Crissov commented 4 years ago

This would be even more interesting for SVG.

LeaVerou commented 4 years ago

@Crissov I believe this is the domain of the Media chapter, you may want to suggest it there!

LeaVerou commented 3 years ago

So this is measured via the same custom metrics code that runs for #39 though it measures runtime style vs link, which may be different than downloaded if there’s JS that inlines certain stylesheets. Not sure which one we want to measure but I’d be inclined to go with the metric we already have.

rviscomi commented 3 years ago

@LeaVerou what are the stats for this metric: % of pages that use the style attr, % of pages that use the <style> element, etc? And how do you see #39 fitting in?

LeaVerou commented 3 years ago

@rviscomi #39 is a completely unrelated stat, it was just convenient to measure this in the same code. I suspect % of pages that use inline vs remote wouldn't be terribly interesting, since most pages use both. We could report average (or median) % of remote vs inline stylesheets. What do you think?