Which media query features are used most?

[tomhodgins]

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…

[LeaVerou]

Alright, so @media rules have "type": "media" in the Rework AST and their condition can be found under the media property, unparsed (e.g. "(max-width: 300px) and (min-height: 200px)"), so to extract these we'd need to parse it ourselves and then count the things mentioned in the first post, namely:

• Count usage by feature, then:
  • count min- features vs max- features.
  • count height features vs width features
• Count values for min-width and max-width

Anything else?

[rviscomi]

@LeaVerou does the JS answer the "common breakpoints" question?

[LeaVerou]

Oops, nope, the current JS discarded values and only aggregated the features tested. I just pushed another JS file (30-media-queries.js) that aggregates the entire queries instead so we can find common ones.

Note that this will produce separate breakpoint results for e.g. min-width and max-width, which I think is ok, and even interesting. But if we just want to find lengths, regardless of feature, it would need different JS.