median()

Example

<div class="median">
  <i style="--value: 5"></i>
  <i style="--value: 1"></i>
  <i style="--value: 2"></i>
  <i style="--value: 3"></i>
  <b style="--span: 2; grid-column: 2 / span var(--span)"><output></output></b>
</div>

/* the place is (4 − 1) × 0.5 = 1.5: the box spans tracks 2 and 3 and halves their width */
@property --pick { syntax: '<number>'; inherits: true; initial-value: 0; }
.median { display: inline-grid; width: max-content; }
.median > i { grid-row: 1; order: var(--value); width: calc(var(--value) * 1px); }
.median > b { grid-row: 2; container-type: inline-size; }
.median > b > output { --pick: calc(round(100cqw / 1px) / var(--span)); }
.median > b > output::after { counter-reset: i round(down, var(--pick)) f round(mod(var(--pick), 1) * 10); content: counter(i) "." counter(f); }
/* only places the answer at the row's start */
.median { position: relative; }
.median > b { min-height: 1lh; }
.median > b > output { position: absolute; left: 0; }

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">
<link rel="stylesheet" href="families/format.css">

<figure class="dcss-median">
  <ol>
    <li style="--value: 5"></li>
    <li style="--value: 1"></li>
    <li style="--value: 2"></li>
    <li style="--value: 3"></li>
  </ol>
  <div>
    <div>
      <div>
        <output class="dcss-format-fixed" style="--value: var(--dcss-median); --precision: 1"></output>
      </div>
    </div>
  </div>
</figure>

Limits

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

• the box at the middle: column ⌊(count + 1) / 2⌋, with --span: 1 for an odd count and --span: 2 for an even one, which spans the two middle tracks and halves the read
• whole-number values: order takes an <integer>, and a fraction such as 2.5 makes the declaration invalid; scale fractions to whole numbers first; the result is then scaled by the same factor
• values of 0 or more
• values under 100,000: past it, Chrome keeps six significant digits of --pick and Firefox drops its .5 (a median of 100000.5 prints 100000.0 in Chrome and 100001.0 in Firefox; WebKit prints it)
• no column gap: a gap widens a box that spans two tracks
• the grid at its natural width (width: max-content): a grid stretched by its parent, as an item of a grid or of a column flexbox, stretches its auto columns, and the read with them
• 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
• 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 --pick on the page: a later @property --pick 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.