Most common properties used inside media queries

[LeaVerou]

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.

[LeaVerou]

Algorithm:

1. Traverse rules inside rules with type: "media"
2. Store properties and property count in data structure

Not sure if we should group by type. a) Because it's not as clear cut. Obviously width, height, aspect-ratio, orientation are size-related, but e.g. what about overflow-*? b) What happens when a MQ has multiple conditions?

So maybe we should just count properties, which also makes this simpler.

[LeaVerou]

While writing the JS for this I wondered: are we interested in properties inside a MQ on any level, or directly inside MQs? IE if there is an @supports inside a MQ, do we count it?

[LeaVerou]

I went with traversing every declaration inside MQs regardless of whether it was also nested in other rules too.