extent()

Example

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

@property --result { syntax: '<integer>'; inherits: true; initial-value: 0; }
.extent output::after { counter-reset: result var(--result); content: counter(result); }
.extent { display: inline-grid; width: max-content; grid-template-columns: auto auto; }
.extent > i { display: contents; }
.extent > i::before { content: ""; grid-column: 1; width: calc((10 - var(--value)) * 1px); }
.extent > i::after { content: ""; grid-column: 2; width: calc(var(--value) * 1px); }
.extent > b { container-type: inline-size; }
.extent > b:nth-of-type(1) { grid-area: 1 / 1; }
.extent > b:nth-of-type(2) { grid-area: 2 / 2; }
.extent > b:nth-of-type(1) > output { --result: calc(10 - round(100cqw / 1px)); }
.extent > b:nth-of-type(2) > output { --result: round(100cqw / 1px); }
/* only places each answer at the grid's start, one a line */
.extent { position: relative; }
.extent > b { min-height: 1lh; }
.extent > 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">

<figure class="dcss-extent">
  <ul>
    <li style="--value: 3"></li>
    <li style="--value: 2"></li>
    <li style="--value: 1"></li>
    <li style="--value: 1"></li>
    <li style="--value: 6"></li>
    <li style="--value: 2"></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.

• values from 0 to 10: 10 is any whole-number bound at or above the largest value and under about 16 million, written twice, in the first cells’ width and in the first read; change both together
• the items display: contents, so their two cells are the grid’s
• a list of one number or more: with none, the read gives a number where d3 gives [undefined, undefined]
• 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
• whole-number answers: each read rounds to 1px
• 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 --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.