CSS Container Queries: Container Relative Lengths

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.

~

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:

  • 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 cqi or cqb
  • cqmax = The larger value of cqi or cqb

💁‍♂️ In earlier discussions the cw unit (and other accompanying c* units) was proposed for this. The cq* units are the result that was settled on, mainly due to conflicts with the existing ch unit.

~

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:

~

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 cqw 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:

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

Neat!

Published by Bramus!

Bramus is a frontend web developer from Belgium, working as a Chrome Developer Relations Engineer at Google. From the moment he discovered view-source at the age of 14 (way back in 1997), he fell in love with the web and has been tinkering with it ever since (more …)

Unless noted otherwise, the contents of this post are licensed under the Creative Commons Attribution 4.0 License and code samples are licensed under the MIT License

Join the Conversation

4 Comments

  1. Quotes from the spec seems contain a typo.
    > qw = 1% of a query container’s block size
    “qw” should be “qb”, I guess.

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.