CSS Container Queries: A First Look + Demo

Back in November 2020 it was announced that Chromium would experiment with Container Queries — back then just a proposal but earlier this year (February 2021) adopted to become part of the CSS Containment Module Level 3 Specification.

Just before the weekend a first version of this experimental implementation landed in Chromium Canary for us to play with (behind a flag). Let’s take it for a test drive …

~

This post is constantly being updated while the spec is still in flux. All code examples shown are in sync with the spec. The embedded demos however might still contain some older syntax/code, as the experimental implementations in browsers lag a bit behind on the spec. See list of updates below if you want to know what’s changed.

👨‍🔬 The CSS features described in this post are still experimental and are not supported by all browsers! If you’re feeling adventurous you can play with these new features today, but you’ll need at least Chromium 91.0.4459.0 with the #enable-container-queries flag enabled, or Safari Technology Preview 142+.

~

# Container Queries?

Container Queries allow authors to style elements according to the size or appearance of a container. For size based container queries this is similar to a @media query, except that it will evaluate against the size of a parent container instead of the viewport.

For style based container queries you conditionally apply styles based on the calculated value of another CSS property.

💡 This post only covers size-based Container Queries.

~

# Quick Demo

Wanting to test Container Queries out I quickly threw a demo together using a classic card component. Here’s a recording that shows how this component behaves:

By default our component shows an image on top and a description below that. If enough space becomes available, they will be shown next to each other. Should even more space become available, then the image will grow even more.

~

# The Code

The markup for all those cards is the same and is pretty straightforward. Only extra thing I’ve added is an extra wrapper div .animalcard-wrapper so that our container queries will play nice when being used inside CSS Grid

<div class="animalcard-wrapper">
	<div class="animalcard">
		<div class="animalcard__image">
			…
		</div>
		<div class="animalcard__description">
			…
		</div>
	</div>
</div>

The default layout of our card uses CSS Grid to position the image and the description:

/* SMALL LAYOUT: Image stacked on top of Description */
.animalcard {
	display: grid;
	grid-template: "image" "description" / 1fr;
	gap: 1em;
	padding: 1em;
}

To be able to use Container Queries, we first need to create a Containment Context (Container Root) on the .animalcard-wrapper. We instruct the browser to keep track of the inline-size, which translates to the width, as we will be changing the layout of its children based on that dimension.

/* Container Queries: Create Container Root */
.animalcard-wrapper {
	container-type: inline-size;
}

You can also name your container query if you want:

/* Container Queries: Create Container Root (Named) */
.animalcard-wrapper {
	container-type: inline-size;
	container-name: animalwrapper;
}

Or, as a shorthand:

/* Container Queries: Create Container Root (Shorthand) */
.animalcard-wrapper {
	container: animalwrapper / inline-size;
}

With this Container Root in place, we can now add extra styles to apply when the Container Root reaches a certain width.

/* MEDIUM LAYOUT: Image next to Description (1fr each) */
@container (min-width: 30rem) {
	.animalcard {
		gap: 2em;
		padding: 2em;
		grid-template: "image description" / 1fr 1fr;
	}

	.animalcard__description {
		text-align: left;
	}
}

/* LARGE LAYOUT: Large Image next to Description */
@container (min-width: 70rem) {
	.animalcard {
		grid-template-columns: 2fr 1fr;
	}
}

By default it will be matched against the nearest parent that’s a container. If you want to explicitly target a different container, include its name when using @container:

/* MEDIUM LAYOUT: Image next to Description (1fr each) */
@container animalwrapper (min-width: 30rem) {
	…
}

If no parent container exists, the Small Viewport will be used.

~

# Final Demo

All together our demo finally becomes this:

See the Pen CSS Container Queries Demo by Bramus (@bramus) on CodePen.

To cater for browsers that don’t support Container Queries, a container queries polyfill is included.

~

# Browser Support

Container Queries has limited browser support, as seen in this Can I Use support table:

Data on support for the css-container-queries feature across the major browsers from caniuse.com

  • Chromium 91.0.4459.0 with the #enable-container-queries flag enabled
  • Safari Technology Preview 142

💡 Shown above is a live CanIUse.com table, showing an always up-to-date support table. By the time you are reading this browser support might have become better.

To stay up-to-date on the progress, and support for them in other browsers, you can follow these bugs:

~

☝️ If you’re looking for more demos, Miriam Suzanne is collecting a bunch in this CodePen Collection. Be sure to check out Una‘s Episode Card for The CSS Podcast

~

# Updates

As the spec for this new CSS feature is still in flux, this post has received some updates over time in order to reflect the latest spec changes.

  • Update 2022.03.31: The order for the arguments for the container shorthand got switched around.
  • Update 2022.03.23: Safari Technology Preview ships with unflagged (size-based) Container Queries support! 🎉
  • Update 2022.01.26: The function syntax for querying sizes — using size()got dropped.
  • Update 2021.11.26: To make the embedded demo work in browsers that don’t yet support Container Queries, it got extended with a Polyfill named container-queries-polyfill. Check out this post for more details on how to use it.
  • Update 2021.06.11: To create a container you no longer need to set the contain property, but instead use the container property.
  • Update 2021.05.02: Creating a Containment Context / Container Root also requires style containment.

~

🔥 Like what you see? Want to stay in the loop? Here's how:

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 …)

Join the Conversation

3 Comments

Leave a comment

Your email address will not be published.

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