Update 2021.10.07: The CSS Working Group has decided to use the
cq prefix (instead of
q before) for these units. This post has been updated accordingly. Could be that the included demos and/or browser implementations are lagging behind on this.
Query length units specify a length relative to the dimensions of a query container. Style sheets that use query length units can more easily move components from one query container to another. The query length units are:
cqw= 1% of a query container’s width
cqh= 1% of a query container’s height
cqi= 1% of a query container’s inline size
cqb= 1% of a query container’s block size
cqmin= The smaller value of
cqmax= The larger value of
As shared by Miriam Suzanne (who originally made the proposal and is an editor of the spec), these units are part of the experimental Container Queries support in Chromium:
🥳 oh, and also Chrome Canary (with the container query flag) now has support for Query Units:https://t.co/GkIbLFW5C6
Not sure when it happened – so far I've only tested qi, because that's the most useful.
If I may quote @chriscoyier… "CSS comes at you fast"
— Miriam (But Terrible) (@TerribleMia) September 9, 2021
Using those new units, Ahmad Shadeed created some practical examples. See this comparison here, where a whole blob of CSS gets replaced with
clamp() that uses the
Chris Coyier also created a nice interactive demo:
If your browser doesn’t support Container Queries — which it most likely doesn’t — here’s a recording:
— Chris Coyier (@chriscoyier) September 17, 2021
Take a good look at how the text size gets adjusted, as the containers get resized.