mean()

Example

<div class="mean">
  <div>
    <i style="--value: 5"></i>
    <i style="--value: 1"></i>
    <i style="--value: 2"></i>
    <i style="--value: 3"></i>
    <i style="--value: 4"></i>
  </div>
  <b><output></output></b>
</div>

@property --result { syntax: '<integer>'; inherits: true; initial-value: 0; }
.mean output::after { counter-reset: result var(--result); content: counter(result); }
.mean { display: inline-grid; width: max-content; flex: none; grid-template-columns: repeat(5, 1fr); }
.mean > div { grid-column: 1 / -1; display: flex; }
.mean > div > i { flex: none; width: calc(var(--value) * 1px); }
.mean > b { grid-row: 2; grid-column: 1; container-type: inline-size; }
.mean > b > output { --result: round(100cqw / 1px); }

dCSS Example

With dCSS, an element whose class is named after the function (dCSS’s docs).

<link rel="stylesheet" href="dcss.css">
<link rel="stylesheet" href="families/array.css">

<figure class="dcss-mean">
  <ul>
    <li style="--value: 5"></li>
    <li style="--value: 1"></li>
    <li style="--value: 2"></li>
    <li style="--value: 3"></li>
    <li style="--value: 4"></li>
  </ul>
  <output></output>
</figure>

Limits

These are the Example’s; the dCSS Example’s are in dCSS’s docs.

• the count written as the number of tracks, repeat(5, 1fr) for 5 numbers, in each grid’s own rule: means of different counts on one page need a class each
• a whole-number mean: --result is an <integer>, so a mean of 2.5 shows 3 in WebKit and Firefox, and Chrome shows some means ending in .5 as the number below (14.5 shows 14: 11 of the 200 under 200 in Chrome 155)
• each answer under 1,000,000: from a million up, Chrome passes --result on as 1e+06, which counter-reset rejects, so the counter prints 0
• the grid at its natural width (width: max-content): held to another width, it shares that width among its tracks instead (2 numbers held 20 or 300 wide read 10 or 150), and with one track keeps the track as wide as the row
• values of 0 or more, and no gap between the items or the tracks
• a total under 17,895,690, the widest Firefox lays out: past it, 40 numbers of 500,000 give a mean of 447,392 there
• a list of one number or more: with none, the read gives a number where d3 gives undefined
• no margins, padding or borders on the items or the query containers: they add to the widths read, and 100cqw reads the content box
• the example at its own width as a flex item (flex: none here): a flex row shrinks it, and the read with it
• each query container stretched across its track (justify-items and justify-self at their defaults): aligned to a side or the center, it shrinks to its content, none, and reads 0
• no other registration of --result on the page: a later @property --result that doesn’t inherit leaves the read right and the counter at 0

Browser support

Each row gives the first versions that support every feature its example uses, by MDN’s browser-compat-data. The Example was run in Chrome 155, Safari’s WebKit 26.4 and Firefox 158, the dCSS Example in Chrome 155 and Safari’s WebKit 26.4.