CSS Container Queries: Chrome DevTools Support

In What’s New In DevTools (Chrome 93), DevTools Developer Advocate Jecelyn Yeen details the new features that are shipping with Chrome DevTools in the upcoming Chrome 93.

The feature that stands out the most to me is “Editable CSS container queries in the Styles pane”. Let’s take a closer look at what this feature brings us today.

~

# Demo

In the video below you can see use DevTools while checking out this CSS Container Queries demo by Una, which we’ve covered before.

As the video runs, take a close look at the top right corner of DevTools. As I resize the viewport, you can see the Style Pane update automatically, showing the Container Queries that get applied. Directly in DevTools you can also edit the Container Queries, and jump to the relevant container.

~

# A closer look

Let’s take a closer look at just one of the Container Queries as it is shown in the Styles Pane:

We can dissect three parts here:

  1. The CSS rule-set that has been applied

    .card {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 0.5rem;
    }
  2. The container query that’s active

    @container (max-width: 460px)

    💡 You can click this line to edit the query contents, directly in DevTools.

  3. The container element that’s responsible for the containment

    → div.card-container.card-2

    💡 You can hover this line to highlight the element in the Elements Tree, and even click on it to jump to it.

~

# That’s it?!

While this implementation is already very nice, know that this is only the first version of it … there’s much more to come. You can read some details about that in the relevant Design Doc.

To follow along as updates get made by the DevTools Engineers, you can also follow the relevant Chromium Bug if you want.

~

To help spread the contents of this post, feel free to retweet the announcement tweet:

~

🗣 This post originally was a set of tweets.

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

1 Comment

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.