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

**URL:** <https://discuss.httparchive.org/t/what-are-the-top-properties-included-in-css-supports-rules/1733>\
**Category:** Analysis\
**Created:** [September 5, 2019, 7:08pm UTC](https://discuss.httparchive.org/t/what-are-the-top-properties-included-in-css-supports-rules/1733 "2019-09-05T19:08:55Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![rviscomi](https://yyz1.discourse-cdn.com/flex035/user_avatar/discuss.httparchive.org/rviscomi/32/835_2.png) [@rviscomi](https://discuss.httparchive.org/u/rviscomi)\
**Post date:** [September 5, 2019, 7:08pm UTC](https://discuss.httparchive.org/t/what-are-the-top-properties-included-in-css-supports-rules/1733/1 "2019-09-05T19:08:55Z")

</div>

`@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](https://discuss.httparchive.org/t/analyzing-stylesheets-with-a-js-based-parser/1683):

```sql
#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](https://docs.google.com/spreadsheets/d/137j_uFe58lCMfp_d9Z2p15zjfc1CkGpj5k6iZ50VuRc/edit?usp=sharing). 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](https://canada1.discourse-cdn.com/flex035/uploads/httparchive/original/2X/2/2acaf62d8c58d8a894150d36bd2a9e32ea291c74.png)

80% of `@supports` properties are `position`. Would be interesting to drill down and see which `position` values are being tested. Probably the [newer ones](https://developer.mozilla.org/en-US/docs/Web/CSS/position#Browser_compatibility) 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`](https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-overflow-scrolling) at ~8%. According to [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-overflow-scrolling#Browser_compatibility) 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](https://developer.mozilla.org/en-US/docs/Web/CSS/--*). 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?