element()

The element’s own border-box width or height in px, from one shared ResizeObserver.

Syntax

element(width | height)

Parameters

axiswidth or heightrequired

Physical width or height, correct in vertical writing modes. Only these two forms belong to Reactive CSS.

Return value

A <length> in px. No value (unset) until the first measurement, so a var() fallback applies: the browser measures before the element's first paint, and the value is written in the next frame. display: none measures 0px.

Example

.geo-wrap {  --size: state(320px);}.geo-wrap .narrower:on(click) {  --size: decrement(40px);}.geo-wrap .wider:on(click) {  --size: increment(40px);}.geo {  --w: element(width);  width: var(--size);  min-width: 160px;  max-width: 100%;}.geo .label {  font-size: clamp(12px, calc(var(--w) / 18), 28px);}.geo .px::before {  counter-reset: w calc(var(--w) / 1px);  content: counter(w) "px wide";}

Behavior

• Updates on resize, at most once per frame, written in the next frame: one frame of lag.
• Feedback loops (width: calc(element(width) + 10px)) are detected and frozen with a warning. A transition or drag that keeps resizing the element is not mistaken for a loop.
• The shared observer disconnects when nothing uses it.
• In the 0.4.0 benchmark (1,000 elements resized every frame) it used 43 ms/s of script and 49 ms/s of layout, against 31 and 79 for one hand-written ResizeObserver.
• Inside a mutation of an :on() rule, element(width) is read once, at the event: the border-box size of the element the rule matched (offsetWidth and offsetHeight, or getBBox() for SVG). .box:on(click) { --w: set(element(width)); }

Supported contexts

• Any value, typically a custom property read by calc().
• The expression of an :on() mutation, as a snapshot.

Limitations

• Experimental: the name could change if a spec gives element() keyword arguments.
• element(#id), the CSS Images 4 image function, is left to the browser.
• Measuring another element is deferred: use container units or anchor-size().
• Falls back to the content box where borderBoxSize is missing.

native equivalent · container query units (cqw/cqh) measure a container for its descendants; anchor-size() measures an anchor

Examples

• Element size · API examples, runs the real runtime

Related