demo · v142

Range container queries

Move the sliders. The card uses @container style(--density >= 3) and @container style(--scale >= 1.5) — range comparisons against custom properties. Chrome 142+ matches them and restyles the card; older browsers leave it at the base style.

--density 2

--scale 1

Cardholder Article

A paragraph of body copy. Padding, border width, and title size all flex according to the custom-property ranges declared in the stylesheet.

density · scale

style(--density) rule applied

none

style(--scale) rule applied

none

All four rules use the new range syntax. Older browsers ignore them, so the card stays in its base form — you should still see some change in Chrome 142+ as you slide.

relevant API

@container brand style(--density >= 3) {
  .card { padding: 2rem; border-width: 3px; }
}
@container brand style(--scale >= 1.5) {
  .card .title { font-size: 2.2rem; }
}

/* Or with the if() function: */
.title { font-size: if(style(--scale > 1.4): 2rem; else: 1rem); }

relevant API

see also