CSS Container Queries: Container Relative Lengths

This content originally appeared on Bram.us and was authored by Bramus!

Coming with Container Queries are “Query Length Units”. As per spec:

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:

• qw = 1% of a query container’s width
• qh = 1% of a query container’s height
• qi = 1% of a query container’s inline size
• qw = 1% of a query container’s block size
• qmin = The smaller value of qi or qb
• qmax = The larger value of qi or qb

~

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 qw unit:

CSS Container Query Units →

~

Chris Coyier also created a nice interactive demo:

See the Pen
resizeasaurus with container units by Chris Coyier (@chriscoyier)
on CodePen.

If your browser doesn’t support Container Queries — which it most likely doesn’t — here’s a recording:

Mmmmm, containnnnner unnnitttsss. https://t.co/AkLpOTpoTd pic.twitter.com/Nl2p7SV7Kr

— Chris Coyier (@chriscoyier) September 17, 2021

Take a good look at how the text size gets adjusted, as the containers get resized.

Neat!

This content originally appeared on Bram.us and was authored by Bramus!

Print Share Comment Cite Upload Translate Updates

APA

Bramus! | Sciencx (2021-09-21T21:26:07+00:00) CSS Container Queries: Container Relative Lengths. Retrieved from https://www.scien.cx/2021/09/21/css-container-queries-container-relative-lengths/

MLA

" » CSS Container Queries: Container Relative Lengths." Bramus! | Sciencx - Tuesday September 21, 2021, https://www.scien.cx/2021/09/21/css-container-queries-container-relative-lengths/

HARVARD

Bramus! | Sciencx Tuesday September 21, 2021 » CSS Container Queries: Container Relative Lengths., viewed ,<https://www.scien.cx/2021/09/21/css-container-queries-container-relative-lengths/>

VANCOUVER

Bramus! | Sciencx - » CSS Container Queries: Container Relative Lengths. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/09/21/css-container-queries-container-relative-lengths/

CHICAGO

" » CSS Container Queries: Container Relative Lengths." Bramus! | Sciencx - Accessed . https://www.scien.cx/2021/09/21/css-container-queries-container-relative-lengths/

IEEE

" » CSS Container Queries: Container Relative Lengths." Bramus! | Sciencx [Online]. Available: https://www.scien.cx/2021/09/21/css-container-queries-container-relative-lengths/. [Accessed: ]

rf:citation

» CSS Container Queries: Container Relative Lengths | Bramus! | Sciencx | https://www.scien.cx/2021/09/21/css-container-queries-container-relative-lengths/ |

Please log in to upload a file.

There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.