leaverou / css-almanac

Repo for planning & voting on which stats to study

Web Almanac CSS Chapter 2020

Repo for planning & voting on which stats to study

Please vote on the proposed stats you would like to see explored with a 👍 or use MaVoice for one click voting.

• Please try to restrict your votes to your favorite metrics and don’t vote on every single proposal. Roughly, avoid voting for more than 7-8 proposals. It's ok to remove your vote from one proposal to vote for another one.
• Please note that votes are non-binding, we may still decide to calculate a stat that has few votes.
• Please note that these proposals have not yet been evaluated for feasibility. Not every statistic can be studied with the HTTPArchive corpus. It is possible that a proposal may have many votes, but turn out to be infeasible in its proposed form.

Useful links

• All proposals sorted by votes with one click voting
• CSS 2020 Planning issue
• 2019 CSS Chapter
• Methodology
• Rework AST playground with inline CSS - use as template
• Rework AST playground with remote CSS - use as template

css-almanac's Issues

line-height units

Considering the unitless line-height is a best practice, would be interesting maybe to see which values authors prefer when setting the line-height: length, unitless or percentage.

(by @catalinred)

Which properties are most commonly used together?

It would be especially cool to see which non-related properties are often used together.

(idea by @karger)

Houdini CSS.registerProperty() and custom property animation

In addition to how this is used, we can also study whether custom properties are present in @keyframes.
How many of those are actually declared, and how many fail to animate?

Variable fonts statistics

• How many websites use variable fonts?
• What variation axes do they declare/use?
• Do they mostly use the low-level font-variation-settings, or the higher level properties (where available)?
• What custom axes do they use?

[meta] Custom metrics

After wading through all proposed stats, it looks like the only ones that may require custom metrics are:

• #1 Some of the metrics here require (or would benefit from) access to computed styles. I think it may be best to store a tree of variable computed values and which selectors they come from (which should be pretty small). This way we can expand what we study if needed. I can write the JS for that.
• #39 This will definitely require custom metrics, and its feasibility is debatable.
• #44 just because I don't know enough about CSS-in-JS to have the faintest idea how to tackle this metric

Greg's script in #37 would also fall under that category, since it reads document.styleSheets, but it may be a better idea to write a script that uses the Rework AST to compute these metrics.

CC @rviscomi @dooman87

CSS transitions & animations

• Which properties are most commonly transitioned? How many of those are not iterpolatable?
• Stats (avg, median, mode) about durations
• Most common timing functions? Timing functions by property?
• Common animation names

Logical vs physical properties

Last year, we only measured the percentage of pages that use any logical property.

While this is a useful measurement, I would like to measure:

• Which logical properties are used most?
• How does the usage compare with their physical counterparts for each?

color(display-p3) stats

I'm aware only Safari implements this now, but other browsers are showing interest so probing color(display-p3 r g b) would be timely this year. Interesting to see

• how much it is used (low, because Safari only)
• is it used with an sRGB fallback and if so, how
• what percentage of the colors declared in P3 are actually outside the sRGB gamut
• use of the color-gamut media query

(by @svgeesus)

Font family & font stack stats

Try to detect and show numbers for the native font stack variations, compared to the other popular font families like Open Sans and Roboto.

(by @catalinred)

Grid-like use of flexbox

You can generally detect usage of flexbox for more gridlike things if sizing is set in percentages and grow is 0. As to make flexbox behave like a grid, you need to stop it being flexible. This would possible be swamped by frameworks as this is what all the frameworks with a flexbox-based grid layout are doing.

Vendor prefix stats

Popular vendor prefix numbers. Are the -webkit-, -moz-, -o- or -ms- numbers still relevant, considering the improved browser support for most of the CSS properties that once required vendor prefixes?

(by @catalinred)

Reply by @svgeesus:

Nice one, although -webkit now falls into two categories which should be distinguished;

1. Things that are actually WebKit specific
2. Things that the other browsers have (wth varying degrees of reluctance) had to implement, primarily so that iOS-specific mobile content also works on browsers other than Safari. The -webkit vendor prefix merely being historical legacy, at this point.

The second one is interesting to analyze because it constitutes a part of the Open Web Platform that was added without the usual design debate or standards process.

Declaration repetition (DRYness)

Via HTTPArchive/almanac.httparchive.org#898 (comment):

If still feasible it would be interesting to know where we stand with respect to declaration repetition, that is, the ratio of unique to total declarations per style sheet (ideally: per media query).

The resulting factor would tell us how “DRY” and therefore maintainable style sheets are, and could potentially inform relevant spec decisions.

Past data, context, and some thoughts are available in 70% Repetition in Style Sheets (disclosure: own article).

What CSS hacks are still used to target browsers/versions/platforms？

Are authors still using these？Which ones are most prevalent that work with common versions of browsers? If possible to determine, which problems are being solved that can’t be solved with @supports?

For reference: http://browserhacks.com/

CSS-in-JS

It would be good to see how popular the various CSS-in-JS approaches are, potentially breaking it down by library.

List of libraries and how to detect:

Implemented	Solution	How	Example
YES	styled-components	data-styled attribute in style tag	https://officeworks.com.au
YES	radium	data-radium attribute	https://pixboost.com/customer
YES	react-jss	data-jss attribute	https://cssinjs.org/react-todo-mvc
YES	Goober	id=_goober
YES	emotion	data-emotion attribute	https://emotion.sh/docs/introduction
YES	merge-styles	data-merge-styles attribute	https://developer.microsoft.com/en-us/fluentui#/
YES	styled-jsx	style element with id that starts from __jsx-	https://vercel.com
YES	aphrodite	data-aphrodite attribute in <style>	https://www.khanacademy.org
YES	fela	data-fela-stylesheet attribute in <style>	https://www.ninjaconcept.com
YES	styletron	data-styletron attribute in <style> or class _styletron_hydrate_ in <style>
YES	react-native-web	<style> with id="react-native-stylesheet"`	https://matchcenter.mlssoccer.com
YES	glamorous	data-glamor attribute in <style>	https://glamorous.rocks/getting-started
	cxs
	react-css
	glam
	rockey

TODO: Add libraries from here https://github.com/MicheleBertoli/css-in-js

!important stats

• What percentage of declarations has !important?
• Of those, what's the breakdown by property?

Algorithm: Walk all declarations, count how many have !important and how many there are total. Of those with !important, count which property it is.

font-variant-*

Stats on which font-variant-* longhands such as font-variant-numeric or font-variant-east-asian are being used.

Also whether the font-variant shorthand is being used with the none value, to reset all the longhands.

How much are specificity hacks used?

By specificity hacks I mean selector rewritings or additions with the sole purpose of increasing or decreasing specificity. Things like:

• [id=foo]
• .foo.foo.foo
• :not(#nonexistent) .actual-selector
  etc

I suppose BEM could also be considered a specificity hack.

Houdini Paint API

This has actually better browser support than I expected so it would be interesting to study if it's used anywhere yet.

Selectors

Replicated everything from last year:

• ID vs class selectors: prevalence and popularity of selector types per selector.
• Attribute selectors: % of selectors that include an attribute selector, and, when used, % of usage (presence of attribute [attr], exact([attr=val]), starts with ([attr^=val]), ends with([attr$=val]), substring([attr*=val]), language([attr|=val]). Used at all; not just in relation to ID or class
• Classes per element (just b/c it was done last year)

Add some features:

• Most common class and id names (shows a11y and framework popularity. This was done a few years back)
• Combinators: how common are space, >, +, and ~, as well as :not (maybe we should leave space out)
• Specificity: what percent of selectors are 0-0-0 thru 5-5-5. What is the highest specificity found?
• Number of items in a selector: with pre-processors, how far are people nesting? What is the longest selector found?
• What is the median number of selectors in a stylesheet or site?
• Pseudo elements: Which are the most popular? Are we more interested in pseudo elements overall, inclusing ::before (incl :before), ::after, ::first-letter, ::first-line, ::selection (incl prefixed)
• Pseudo elements 2: Are people styling user-agent shadow DOM features/pseudo elements? How many ::-webkit-X, ::-ms-X, and ::-moz- like ::-webkit-inner-spin-button are people including, including non-prefixed, such as ::file-chooser-button.
• UI selectors: What are the most popular of the UI selectors, and what percentage of sites use them? :checked, :valid, etc.

Which pseudo-classes/elements are the most popular and by how much?

css custom properties

Last year we adjusted the data gathering so we could look at and examine custom elements, I even made a little tool that let you explore the dataset collections with regexps instantly because the dataset is rather specific and comparatively small (it's a loadable json file even of reasonable size)... This was really, really handy in exploring (we even found and helped fix a very popular bug because of it) and I've used it a number of times since - @rviscomi gives me a new dump of data occasionall and we can explore it over time even.... I wonder if we could do the same for css custom properties? I expect the same basic idea/data model would work?

SVG favicon stats

How many of the pages are using SVG favicons and are these SVG's using CSS @media (prefers-color-scheme: light/dark) to provide an alternate style depending on the OS color scheme?

(by @catalinred)

<length> stats

When it comes to CSS units usage, I'd love to see some numbers on unitless 0 values, e.g. 0 vs 0px/em/rem/ numbers comparison.

(by @catalinred)

Gradient stats

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

Analyze Sass stylesheets

We could get HUGE insight about what CSS authors need by analyzing Sass stylesheets. We can find URLs to Sass files from the CSS files that have sourcemaps and there is a JS-based Sass parser. This will give us insight not just into the current state of CSS, but perhaps more importantly, its future.

The things we could study span all areas of the outline. Here are some initial ideas

Selectors

• How common is nesting (&)? How many levels?
• How frequently are variables used in selectors?
• How common are placeholder selectors and what are their most common names?

Variables

• How commonly are CSS variables and Sass variables combined?
• What are the most common variable names?

Control flow / maintainability

I'm most excited about studying these, because they are things that absolutely cannot be done in CSS today, so it would be illuminating to see how much they are used and for what.

• What are the most common mixin names? What percentage is just declarations and what percentage contains rules? How many rules on average?
• How much are control flow statements used? (@if, @else, @for, @each etc)
• What about the if() function?
• How common are custom functions? How many are there in the average Sass stylesheet? What are the most common function names?

Colors

• How commonly used is each color extraction/manipulation function? (this will also be very useful for developing CSS Color 5)

Unknown properties

This could include:

• Most common invalid (nonexistent) properties, at-rules, selectors
• Common syntax errors

Most common properties used inside media queries

We may possibly want to group by type of media query (size-related vs capability-related).

This will give us a lot of insight about which design aspects of websites designers want to adapt to different conditions.

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.

Usage of named lines syntax when creating grid tracks

Are people naming lines? Anecdotally I didn't see a lot of use of this until the last year, I'm getting more questions about it recently and it feels as if it was something people found an extra complexity but now they are using grid more they find it is useful. I'd be interested to know if the stats bear that out.

Usage of grid-template-areas as grid layout mechanism

I'd be interested to see how often people are using grid-template-areas rather than placing by line name and number.

Stats on various ways of hiding DOM elements

Would like to see numbers on various ways of hiding DOM elements, by trying to guess on: [aria-hidden], .hidden, .hide, .sr-only, .visually-hidden, .visuallyhidden, .invisible or [hidden].

(by @catalinred)

Multicol usage with column-count and column-width

How much are people using multicol on the web?

direction CSS property usage

I'm interested to find out how many devs use a different direction in CSS compared to the dir attribute from the markup?

My guess is that the CSS direction property is often used for UX things like star rating or similar and has nothing to do with the actual direction of the text in the document.

Frequency of each layout method (grid, flexbox, floats etc)

(by @catalinred)

[meta] Chapter outline

Note: This needs to be periodically copied over to the google doc, but is easier to work on here so we can easily cross-reference issues

• Introduction - @LeaVerou
• Usage
  • How big is it? (average number of rules, declarations etc)
  • How is it included? #17
  • Is it preprocessed? #41
• Selectors and the cascade #31
  • Specificity #5 #27
  • Pseudo-classes #6
  • !important #48
• Values & Units
  • calc() #28
  • Length units & Unitless 0 #11
  • Global keywords #49
• Color - @svgeesus
  • Popularity of different ways to declare colors #18 #32
• Images - @LeaVerou
  • Gradients #20
• Layout - @rachelandrew
  • Frequency of each layout method (grid, flexbox, floats etc) #14
  • Sizing model #8
  • Flexbox vs grid #35
  • grid-template-areas #33
  • Named lines #34
• Transitions & Animations #21
• Visual Effects
  • Blend modes
  • Filters
  • Masks
  • Clip paths
• Responsive Design - @rachelandrew
  • Media query features #30
  • Most common properties used inside media queries #45
• Custom Properties #1 - @LeaVerou
  • Names
  • Values
  • Usage (properties, functions)
  • Constants
  • Custom properties in JS
• Browser support
  • Vendor prefixes #9
  • @supports #19
• Internationalization - @svgeesus
  • direction property #38
  • Logical vs physical properties #43
• CSS & JS - @LeaVerou
  • Houdini #3 #4
  • CSS-in-JS #44
• Meta - @LeaVerou
  • Shorthands vs longhands #10
  • Which properties are most commonly used together? #26
  • Unknown properties #29
  • Parse errors
• Sass #39
• Conclusion - @LeaVerou

Changelog:

Nov 23: Moved Sass to a separate section, moved !important under Selectors, which was renamed "Selectors & Cascade".
Nov 10: Added @rachelandrew to RWD chapter, removed CSS Hacks #40 section
Sep 21: Removed Fonts section, as the overlap with the Fonts chapter is too significant. This was it:

• Fonts - @svgeesus
  • Opentype features #23
  • Variable fonts #2
  • Font families and stacks #15
  • line-height units #16

Sep 17 Removed #12, added the now more general #14 as a separate section

What percentage of CSS is served minified?

…and what percentage of that uses sourcemaps?

calc() statistics

• Which properties is calc() most frequently used in?
• Which units is calc() most frequently used with?
• How complex are the calculations?
• Is calc() used to compute constant non-integer values? If so, which ones? (by @Crissov)

Clearfix stats

Are .clearfix, .clear or .cf still popular? How popular considering the current flexbox and grid usage?

(by @catalinred)

Going deeper on custom-property usage

I see last year we only calculated how many websites use custom properties (5%).

This year, I would like to go a lot deeper. E.g.:

• What are the most popular property names? (via custom metric or AST)
• What percentage of values are set only, used in var() only, or both? (via custom metric)
• Which values are most popular? (per WG resolution here) (via custom metric or AST)
• What do they use them for? Colors and fonts? Numbers? Strings? Custom datatypes? (via custom metric)
• Which properties do they use them in? (via custom metric or AST)
• Which functions do they use them in? (via custom metric or AST)
• How do they use them?
  • Do they take advantage of the cascade, or just on the :root like static variables? (via custom metric)
  • Do they take advantage of the reactivity (setting them via JS, or overriding in pseudo-classes)? (via custom metric or AST)
• Do they use the fallback parameter? (via custom metric or AST)
• Do they use them in conjunction with @supports? If so, what property name do they test for? (via AST)
• What is the depth of the dependency graph? Are there any cycles? (via custom metric)
• How frequently are variables explicitly reset to initial? (via custom metric or AST)

Which media query features are used most?

I've wondered for years the web-wide usage of media query features and wanted answers to questions like:

• Are min- or max- features used more prevalently?
• How does usage of width features compare to height for responsive design?
• How much support for print media type is out there?
• For things like width-based breakpoints, what are the commonly used breakpoints
• More…

[meta] Value utilization

While it may be obvious, I've historically found value utilization valuable in a normalized manner for browser vendors, interested web devs as well as standards folks. What I mean by normalization is to remove down to the unit. Francois and myself did a lot of work here because many people report on say the utilization of a property (eg: Chromestatus) but we found a lot of value in the value. So we would normalize them to parans, units, keywords. So for color you would see something like this:

• system color (you may want to break this down but initially just this keyword is of value)
• hex
• rgba()
• rgb()
• hsl()
• custom property

The units become valuable, say for example percentages used in the margin and padding properties :)

Global keyword usage

Usage of inherit, initial, unset, revert, overall and by property.

Algorithm is pretty obvious.

How frequently is each color format used?

• What percentage of colors used use what format? (rgb(), rgba(), hsl(), hsla(), #rgb, #rgba, #rrggbb, #rrggbbaa, color(...), named colors, currentColor.
• What percentage of color functions use the new syntax? (e.g. rgb(r g b / a) instead of rgba(r, g, b, a) etc.

In a way, this is a generalization of #18.

Shorthand vs longhand stats

Popular shorthands, e.g. transition, background, font, animation. Are the numbers maybe low due to the fact that the order of the values is not that easy to remember without checking the documentation?

(by @catalinred)

How popular is each CSS preprocessing language?

We can study this by extracting the extension from sourcemap URLs.

Sizing model stats

How many of the pages are using the latest border-box sizing model, compared to content-box? Is the border-box number high due to popular CSS libraries usage, such as Bootstrap or Zurb Foundation?

(by @catalinred)

Specificity & number of selectors

E.g. average specificity per selector

@estelle:

Specificity: what percent of selectors are 0-0-0 thru 5-5-5. What is the highest specificity found?

@supports stats

Which features are most commonly detected and with what values (if any)?

We may also want to measure CSS.supports(), its JS counterpart.