What are the top properties included in CSS @supports rules?

Analysis
1

@supports is a CSS rule that allows developers to configure certain styles only if the user agent passes a given test. For example, if the UA supports display: grid, the stylesheet could define rules to style the page using CSS Grid.

In this example, display is the property being tested in the rule. So what are the top props?

To answer this question, I’ll go back to using our handy tokenized CSS table:

#standardSQL
CREATE TEMPORARY FUNCTION getSupports(css STRING)
RETURNS ARRAY<STRING> LANGUAGE js AS '''
try {
  var reduceValues = (values, rule) => {
    if (rule.type == 'supports') {
      values.push(rule.supports.toLowerCase());
    }
    return values;
  };
  var $ = JSON.parse(css);
  return $.stylesheet.rules.reduce(reduceValues, []);
} catch (e) {
  return [];
}
''';

SELECT
  client,
  TRIM(property) AS property,
  COUNT(0) AS freq,
  SUM(COUNT(0)) OVER (PARTITION BY client) AS total,
  ROUND(COUNT(0) * 100 / SUM(COUNT(0)) OVER (PARTITION BY client), 2) AS pct
FROM
  `httparchive.almanac.parsed_css`,
  UNNEST(getSupports(css)) AS supports,
  UNNEST(REGEXP_EXTRACT_ALL(supports, '\\(+([^:\\(\\)\\d]+):')) AS property
GROUP BY
  client,
  property
ORDER BY
  freq / total DESC

All results. Here’s the top 10:

property desktop mobile
position 82.29% 79.90%
-webkit-overflow-scrolling 8.27% 8.04%
display 1.47% 1.50%
-ms-ime-align 1.32% 2.67%
transform-style 0.79% 0.73%
-webkit-transform-style 0.58% 0.55%
-ms-accelerator 0.52% 0.49%
object-fit 0.47% 0.52%
-webkit-line-clamp 0.43% 0.34%
–css 0.38% 0.35%

image
image.png1158×1020 74.2 KB

80% of @supports properties are position. Would be interesting to drill down and see which position values are being tested. Probably the newer ones like sticky, right? fixed and friends are supported across all major UAs according to MDN, so it seems unnecessary to manually check support. Maybe the results are skewed by a popular CSS library?

The second most popular prop is -webkit-overflow-scrolling at ~8%. According to MDN this property is only available on iOS Safari and it “controls whether or not touch devices use momentum-based scrolling for a given element”.

Does anyone have any idea what --css is? Could it be regex error? It looks like a custom property or variable. Is this how to test whether the UA supports custom properties?

property pct
–css 0.38%
–custom 0.06%
–a 0.02%
–foo 0.01%
–var 0.00%
–color 0.00%
–custom-property 0.00%
–test 0.00%
–srf 0.00%
–variable 0.00%

Looking at the top 10 properties prefixed with -- it looks like an arbitrary name is given as a quick and dirty way of testing support.

Any other interesting insights in the results?