Container Queries & The Future of CSS

we need to understand where we are –

And how we got here.

In my mind CSS exists for two primary reasons

First, CSS makes styles responsive –

and not just to dimensions of a viewport –

But user preferences –

and device interfaces.

When Sir Tim and the team at CERN released the first hypermedia browser, it was designed for the NeXT machine, with a fancy graphic interface

But you can’t make a web that’s “world-wide”, by saying “it works on my machine” and everyone else is an “edge-case”.

So right away they release a second browser, designed to work on any terminal with an internet connection.

This becomes the mission statement of the web – web for all, web on everything.

That includes assistive devices –

And non-visual media – always with the end-user in control of the outcome.

We provide hints and suggestions, semantic clues, but only the browser can put it all together.

And the cascade describes that process –

by accepting style sheets from everyone involved –

Browsers & users establish global defaults and preferences across the web, and then we fill in the details of our particular site

These are the primary “cascade origins” – each one representing a different set of needs and concerns,

But these different perspectives, can sometimes be in conflict. So the rules of cascade & inheritance describe how to merge all three origins, and resolve those conflicts.

In most cases, the user preferences will override the browser defaults, and (for better or worse) we’re allowed to override both of them.

But when things really get heated, when it really matters, the user and browser can insist –

That some styles are more important than others –

Creating important origins that cascade in reverse order. Important author styles aren’t that special. That’s us in the middle, with our normal and important styles side-by-side. But users can override us when they need to, and the browser finally decides what’s out of bounds, what’s possible on this device, what features are supported, and so on.

The second goal of CSS is to make our design objects reusable…

Instead of repeating the same styles over and over in our HTML

We can use selectors to apply styles broadly –

Creating patterns based on things like classes and attributes –

Which we can combine, to compose re-usable objects –

– Design Systems & Component Libraries.

CSS is object-oriented to the core, but it is also declarative, contextual, and resilient – features of the cascade. CSS is cascade-oriented.

But selectors create another potential conflict for the cascade to resolve. Since we can use multiple different selectors to target the same element –

The cascade needs to determine a winner, so it uses a clever heuristic – an educated guess – called specificity.

We assume that each selector type is meant to represent a different goal or perspective, based on how narrowly that selector has been targeted.

The most generic selectors, help us paint in broad strokes to establish low-priority defaults –

Classes and attributes allow us to describe higher-priority patterns, that make up the majority of our styles –

Then one-off ID’s are both the most narrowly targeted, and the highest priority.

We can combine these selectors in various ways, but their specificity is always compared one “layer” at a time. Selectors with an ID will always override selectors without an ID, and so-on down the list.

This is a rough approximation of the layers in our code – moving from global abstractions to narrowly targeted components and overrides. –

But it’s not perfect.

As our projects become larger and more complex with more distributed teams and third-party integrations, there are a lot of situations that don’t fit the rule –

Some low-priority defaults are very specific –

While some generic attributes, really ought to have more weight behind them.

And out of all these specificity layers, there’s only one that we can both customize and reuse. Classes & attributes.

So we spend a lot of our time fighting over how many attributes should be in a selector –

With rules and conventions to ensure our cascade specificity –

matches carefully crafted layers of intent,

And throwing importance like a grenade when we get stuck,

Or if one part of the system doesn’t play by the same rules.

So that brings us to our first new feature: Cascade Layers.

This will allow us to create our own custom layers of the cascade, that more explicitly represent the different parts of a system – and potentially different teams on a project, or even third-party code. You can think of these as customizable layers of specificity –

Or like our own custom CSS Origins – but for things like resets, defaults, frameworks, themes, components, utilities – anything we want, in whatever order we need.

And the important flag works as intended. Inverting the layers when it becomes necessary for a lower layer to insist on something, and punch above it’s weight.

We can define a layer, give it a name, and add styles to it using either a layer function on the import rule –

Or by nesting styles inside the new at-layer rule –

– Or both. Here we’re creating a “default” layer with the headings.css import, and using the at-rule to add a few more styles to the same “default” layer.

Layers stack in the order they were first defined, with the first layer at the bottom, and the last layer at the top. The highest layer will win conflicts, no matter what specificity is used for the selectors inside.

Specificity only matters inside each layer.

So this single menu-item class wins over the combined menu, dropdown, and item classes, because the override layer is defined after the framework layer. This makes it simple to override a tool like bootstrap, no matter how they write their selectors.

But we don’t need to keep all our styles in that same order. Once a layer has been established, we can add to it from anywhere in our code. The priority is based on when the layer name first appears.

We can even use the at-layer rule without any styles, just a name, to establish our order up front. After that, we load the code in any order, and it will just work.

That’s especially important if we’re using CSS-in-JS, where styles might load in any order.

And there’s a shorthand syntax to make that even easier, using a comma-separated list of layer names.

One of the goals here is to make it so that we as authors get to define exactly where third-party tools belong in our layering. No matter what specificity those tools use internally, or whatever layers they create, we can always override them without resorting to specificity hacks.

And this also gives framework or component-library authors a way to provide layers we can hook into –

Either directly, or by wrapping those layers into a contained namespace. We can create or access “nested” or “name-spaced” layers using a dot-notation to combine the names.

Or we can actually nest the layer rules – it works the same way.

This gives us a lot more control over our corner of the cascade, so we’re not totally reliant on selector specificity and code-order to determine what takes precedence. We have control over the cascade!

Hopefully that allows us to replace all our specificity & importance hacks with more clearly defined patterns.

Of course, we don’t have to put all our styles into these layers – and for the sake of progressive enhancement, we likely want to start adding layers slowly.

Un-layered styles will work the same way they always have, and belong to an implied “base layer” below all the others.

This is actually a recent change – we used to have unlatered styles at the top – but we think making them a base helps match expectations & improve the upgrade path.

But there is also discussion now about making it adjustable. You can check out the issue thread if you’re interested in that conversation.

The next feature is also about how selectors work. With “scope”, we’re trying to address two issues that come up regularly, and drive people to use tools & conventions like BEM syntax or CSS-in-JS.

The first goal is to avoid naming conflicts as our projects grow.

Which we can solve by focusing on our second goal: expressing “membership” or “ownership” in our selectors.

While nested selectors might seem like a way to express membership – in this case a title that is inside a post –

That’s not quite the same thing as a post-title. The first one only describes a nested structure, but the second describes a more clear membership in a component pattern. Not all the titles in a post, just the title that belongs to the post.

We don’t have a good way to convey that using our current CSS selectors, unless we invent a new unique name for every kind of title, based on what it belongs to – either manually using a convention like BEM, or automated with JavaScript compilers.

And if we want some global title styles, we end up using multiple classes – and hoping the more targeted pattern will override the global pattern.

Another way to think about this is to say that some components have lower boundaries – the component itself is a “donut” with a hole in the middle for content. We should be able to style a tab component, or a media-object, without worrying that we might accidentally style everything inside it by mistake.

This might sound similar to shadow-DOM encapsulation, and there is certainly cross-over between scope & encapsulation.

But the Shadow-DOM is designed around highly-isolated widgets. Boundaries are defined in the DOM, so that each element has a single scope, and styles are isolated from getting in or out. Scopes are never allowed to overlap at all.

While that kind of encapsulation is useful sometimes, it’s very different from the lighter-touch “scope” that we get from existing build-tools and conventions –

Where scopes reference the DOM, but they’re more fluid – able to overlap, and integrate more smoothly with global design systems. Different scopes can have different boundaries, and global styles continue to apply globally.

This provides us with a much lower-impact alternative. Scopes are defined in CSS, and can be re-used across components, or overlap & cascade together.

So we’re proposing an at-scope rule, that accepts both a scope-root selector (in this case media) and a lower-boundary selector (in this case content). Any selectors inside the at-rule only apply between the root and the lower-boundary. In this case we’re styling images inside media, unless they are also inside the media content.

We can also talk about this in terms of proximity. These two selectors apply to links inside a light-theme or dark-theme class. And that works great, as long as we never nest one theme inside the other. Since our selectors both have the same specificity, and ancestor proximity is not part of the cascade –

dark-theme will always override light theme in nested situations.

We can solve that problem using lower-boundaries, so that themes never bleed into each other –

But I think it would also make sense for scope proximity to be added as part of the scope feature. When specificity is equal, we would default to using the “closer” scope-root. This part of the spec is still being debated.

There’s a lot more to the proposal, which you can look into if your interested. The CSSWG has expressed interest, feedback is welcome, and Chrome plans to prototype this soon, for more testing.

But for now, this one is entirely theoretical.

And that brings us to the real reason we’re here. Container Queries.

• Media queries let us respond to viewport
• Same element in multiple containers, viewport isn’t useful
• Respond to containers instead

No matter how those containers are nested.

But trying to measure a “container” in CSS, and then make changes based on that measurement, poses a bit of a paradox.

One of the coolest responsive features in CSS, which we don’t talk about nearly enough, is the way we calculate layout based on both context and content. Add more content, and a container will try to grow, but it might also be constrained by context, or explicit sizing.

That’s very cool, but if you add container queries, it becomes an infinite loop: as the container gets larger, we make the content smaller, which makes the container smaller, which makes the content larger.

So for a long time, this seemed impossible to implement. But behind the scenes, a lot of people have been laying the groundwork in browsers.

Last year two proposals emerged, showing different ways we might pull this off. Both are interesting, but David Baron’s approach has the most momentum right now, and I’ve been working on it to flesh out some of the details, and start writing a specification.

The first thing we need to do is define our containers –

Any element we want to measure, query, and respond to.

In order to avoid any layout loops, we need to turn off content-based sizing on those elements. Our containers need to be sized without reference to anything inside it.

We already have a property for this! It’s called contain, and allows us to “contain” various types of things.

Size containment turns off content-based sizing, layout containment is kinda like a clearfix – wrapping around floats and margins – and style containment keeps list-counters from leaking out.

And we’re going to need all three of these for our container queries work.

But size-containment is… bad in most cases. It’s just not possible to build all our layouts with explicit width and height!

We need one axis to be fluid, and respond to content, so that we don’t create accidental overflow.

And usually we want to contain the width, or the inline-dimension, and allow the height to grow or shrink with the content. That’s pretty standard web-layout best practice. So we’re adding an option to make single-axis containment possible.

Contain inline-size.

We’re not sure if we can also support a block-size value here. That needs some more experimenting. There are weird issues with the way percentages work.

Don’t worry, you don’t need to memorize and write out all these values. The browser will figure that out for you.

Instead of specifying all the containment required, we just say what type of container we want – or what we want to query. In this case we want to query the inline size. Browsers can take that, and apply the right containment in the background.

This changed recently, so some articles and demos might still use the old syntax.

And the spec is still in active development, so it could change again.

Once we have containers, we can begin to query them!

A container-query looks exactly like a media-query, but with at-container instead of at-media. And each element will query the size of it’s nearest ancestor container.

Container’s can’t query themselves. That’s ensures there are no loops.

But we can nest containers as much as we need to –

And each container can respond to the one above it.

If you don’t want to rely on the nearest container, you can also give containers names, and only query containers with a specific name.

Or only query a specific container type.

Chrome already has a prototype, and you can start playing with it behind a feature flag. I’ve started collecting codepen demos to help you get started.

But why don’t I just show you? I’ve set up two containers on the page, each with one card using a media-query, and one card using a container query. The media queries all trigger at the same time, but the container queries depend on the size of the container.

My coworker David Herron, made this one showing the same blockquote with three different designs based on the size of the container.

In some cases, like inside flexbox or grid, there is no outside container that will tell us the actual space available for each item. But we can get around that by adding a container around each component – in this case div.card is wrapping each article. The outer div establishes a container, and the inner article can query it.

Max Böck has created this bookstore demo with self-contained web components. Each component host element is a container, and everything inside the component adjusts based on available size.

Of course, we can also get creative! Jhey Tompkins made these interactive blinds that get smaller as the container gets bigger. Because CSS doesn’t have to be practical to be awesome.

Stephanie Eckles joked that my containers don’t hold water, so I made this demo to prove her wrong.

We’re also working on container-relative units, similar to vw, vh, vmin, vmax, but a percentage of the container size rather than the viewport.

And we’re working on queries that aren’t about the container size.

We might be able to query the actual value of a property on the container, and change internal styles based on that property.

Or check if our container is position-sticky, and currently in a “stuck” state.

Both of these should be possible, but we haven’t worked out all the details yet.

All of this could be available in Chrome & Edge by the end of the year. Firefox and Safari have both expressed interest, but I imagine they’ll wait for a stable spec before implementing.

There’s also a polyfill being developed, which would make this all work on older browsers, using a bit of JavaScript.

Or we can use the at-supports rule, to create fallbacks natively in CSS.

I’ll share the link to my slides, so you can check for the latest resources.

All of these features are designed to work together

Building on the existing features of CSS –

And the cascade that holds it all together –

But particularly the overlap between the two main goals of CSS: to make responsive –

and reusable styles. Building components that are inherently responsive.

There’s already been a lot of progress in this space, with tools like grid & flexbox & aspect-ratios – now layers, scope, and container queries – but also color-functions, nesting and more.

“Our medium is not done. Our medium is still going through radical changes.”