Logical vs physical properties

[LeaVerou]

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?

[LeaVerou]

Alright, so this seems tedious, but straightforward. It appears to be a single task of counting properties and comparing the counts, making sure not to forget about the various shorthands.

List of logical properties: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical_Properties

[LeaVerou]

Just pushed JS for this. It measures use of all logical properties or properties with logical keywords (except those with the logical keyword, since AFAIK that's not supported anywhere). Since there's no "physical counterpart" (e.g. you can't say inline-size is basically width, since that's only true for Western languages), they are categorized in buckets based on what they do, regardless of direction.

Sample output for the Chrome UA stylesheet:

{
    "logical": {
        "total": 86,
        "margin": 72,
        "padding": 10,
        "text-align": 3,
        "min-size": 1
    },
    "physical": {
        "total": 49,
        "size": 30,
        "inset": 6,
        "text-align": 5,
        "min-size": 4,
        "overflow": 2,
        "margin": 1,
        "resize": 1
    }
}