How prevalent are empty custom properties in CSS?

Analysis
1

The CSS Working Group is looking into usage of empty custom properties in the wild and the HTTP Archive dataset would be perfect.

We have August 2020 data in the almanac.parsed_css table but it’d be better to have more recent data. Unfortunately we need the response bodies in order to generate a new version of parsed_css, so I’m leaving this thread open as a placeholder until we can get newer data.

We would be analyzing the percent of pages that have at least one instance of a CSS property named exactly "--".

2

While we wait for newer data to become available, I took a look at the 2020 data to get a preview of where we’re at.

I based this off of the all_properties.sql query used by the 2020 Web Almanac’s CSS chapter:

#standardSQL
CREATE TEMPORARY FUNCTION getProperties(css STRING) RETURNS ARRAY<STRING> LANGUAGE js AS '''
try {
	function compute(ast) {
		let ret = {};
		walkDeclarations(ast, ({property, value}) => {
      if (property == '--') {
        incrementByKey(ret, property);
      }
		});
		return ret;
	}
	let ast = JSON.parse(css);
	let props = compute(ast);
	return Object.entries(props).flatMap(([prop, freq]) => {
		return Array(freq).fill(prop);
	});
}
catch (e) {
	return [];
}
'''
OPTIONS (library="gs://httparchive/lib/css-utils.js");
SELECT
  *
FROM (
  SELECT
    client,
    prop,
    ARRAY_AGG(DISTINCT page) pages,
    COUNT(DISTINCT page) AS num_pages,
    COUNT(0) AS freq,
    SUM(COUNT(0)) OVER (PARTITION BY client) AS total,
    COUNT(0) / SUM(COUNT(0)) OVER (PARTITION BY client) AS pct
  FROM
    `httparchive.almanac.parsed_css`,
    UNNEST(getProperties(css)) AS prop
  WHERE
    date = '2020-08-01'
  GROUP BY
    client,
    prop)
ORDER BY
  pct DESC

The results show that the empty custom property is only used on 4 pages a total of 17 times, in the desktop and mobile datasets equally:

https://conquistaimoveisbrasil.com.br/
https://marcioluizcorretor.com.br/
https://unitedbyblue.com/
https://www.yumekoubou.or.jp/

So to answer the top question, it’s not very prevalent at all! It would be interesting to see if there are any major differences in the 2021 data, which I hope to have in a month or two.

3

Checking those urls manually:

  • the first two set --:0; a single time and never reference it (they’re clearly done by the same webdev firm)
  • the third sets a couple of --:1rem;/etc rules, but never references them in a var afaict
  • the fourth uses .all-custom-properties-reset{--:initial;}, so they’re clearly intending it to work as I’ve intended to spec it, as an all equivalent for custom props.

So that’s excellent, there’s no visible compat issue with keeping the spec as-is and getting browsers to change.