Read a width

Example

<div class="read-a-width" style="width: 120px">
  <output></output>
</div>

@property --result { syntax: '<integer>'; inherits: true; initial-value: 0; }
.read-a-width output::after { counter-reset: result var(--result); content: counter(result); }
.read-a-width { container-type: inline-size; flex: none; }
.read-a-width > output { --result: round(100cqw / 1px); }

Limits

• a box with container-type: inline-size
• the number read by the box’s descendants, not by the box itself
• a block, not an inline box: inline-size containment has no effect on an inline box, so 100cqw reads the next query container out, or the small viewport’s width
• a whole-number width: Chrome reads some widths ending in .5 as the number below (a width of 14.5 reads 14: 19 of the 400 such widths under 400 in Chrome 155; WebKit and Firefox read 15)
• 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 example at its own width as a flex item (flex: none here): a flex row shrinks it, and the read with it
• 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.