css-almanac Ways CSS is applied to the page

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.

Jul 10 '20 16:07 LeaVerou

This would be even more interesting for SVG.

Jul 21 '20 06:07 Crissov

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

Jul 21 '20 06:07 LeaVerou

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.

Aug 05 '20 07:08 LeaVerou

@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?

Sep 14 '20 17:09 rviscomi

@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?

Sep 15 '20 12:09 LeaVerou