Notes on Container Queries

19 January 2023

As of this writing container queries are here! This much awaited feature is usable in all major browsers with the exception of Firefox which includes them in Firefox 110 which is in the pipelines. For all those who, like myself, were waiting for this moment before trying them out, here are some notes on usage, some caveats, and links to articles explaining them in better detail and more coherently.

Basic Usage

For example’s sake let’s use an html blockquote with minimal styling as it appears elsewhere on this site:

...when you have eliminated the impossible, whatever remains, however improbable, must be the truth...

The Sign of the Four, chapter 6 (1890)

Sherlock Holmes in The Sign of the Four

This may very well be the only type of blockquote I need but what if I wanted it to display differently under different circumstances.

For instance I might want to display it next to a paragraph and jutting out ot the side on desktop but in the regular flow of text on mobile. For this I could use a media query like in this example:

...when you have eliminated the impossible, whatever remains, however improbable, must be the truth...

The Sign of the Four, chapter 6 (1890)

Sherlock Holmes in The Sign of the Four

Implementation

Compare the following example with the previous one:

Here we can do virtually the same thing with a container query. Code for the container query is attached to the .container class if you care to inspect. As a bonus we can make the text bigger when the blockquote itself reaches a certain width.

...when you have eliminated the impossible, whatever remains, however improbable, must be the truth...

The Sign of the Four, chapter 6 (1890)

Sherlock Holmes in The Sign of the Four

To do so is relatively simple. We need to establish which element is the container and add certain properties. container-type can be size, ìnline-size, or normal

sizeis based on both inline and block dimensions inline-size on inline (horizontal) dimensions block-size on block (vertical) dimensions normal removes the container query

container-name is optional but is useful when there are several containers in a scope.

The container is styled like so :

.big-quote {
  container-type: inline-size;
  container-name: big-quote;
}

It is followed by a container query

@container big-quote (min-width: 650px) {
  .quotation {
    font-size: var(--size-1);
    margin-bottom: var(--space-3);
  }

  .credit {
    font-size:  var(--size-0);
    margin: 0;
  }
}

Testing and Debugging

To test container query without resizing you browser, you can use the css resize property.

.test-container-query {
  container-type: size;
  resize: both;
  overflow: hidden;
  margin: .5rem auto;
}

...when you have eliminated the impossible, whatever remains, however improbable, must be the truth...

The Sign of the Four, chapter 6 (1890)

Sherlock Holmes in The Sign of the Four

Caveats

Some things of which to be aware when writing container queries:

When using container-type: size or container-type: block-size in a horizontal language you have to make sure the height is set. This seems also to be the case in a vertical writing-mode with width and container-type: size or container-type: inline-size.
Several articles and examples of container queries no longer work in 2023. I was very disappointed to see that this Codepen no longer works (until I found this one which does)
Container queries are best used for progressive enhancement. There are still plenty of browsers that do not support them in the latest verions and plenty of people who don’t update their browsers. Some polyfills are out there for those who feel like experimenting.

Resources

CSS