CSS Container Queries: Chrome DevTools Support

Support for Container Queries has landed in Chrome DevTools (Chrome 93). Let’s take a look at what this feature brings us today …

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.

~

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

? This post originally was a set of tweets.


Print Share Comment Cite Upload Translate
APA
Bramus! | Sciencx (2024-03-28T17:34:55+00:00) » CSS Container Queries: Chrome DevTools Support. Retrieved from https://www.scien.cx/2021/07/29/css-container-queries-chrome-devtools-support/.
MLA
" » CSS Container Queries: Chrome DevTools Support." Bramus! | Sciencx - Thursday July 29, 2021, https://www.scien.cx/2021/07/29/css-container-queries-chrome-devtools-support/
HARVARD
Bramus! | Sciencx Thursday July 29, 2021 » CSS Container Queries: Chrome DevTools Support., viewed 2024-03-28T17:34:55+00:00,<https://www.scien.cx/2021/07/29/css-container-queries-chrome-devtools-support/>
VANCOUVER
Bramus! | Sciencx - » CSS Container Queries: Chrome DevTools Support. [Internet]. [Accessed 2024-03-28T17:34:55+00:00]. Available from: https://www.scien.cx/2021/07/29/css-container-queries-chrome-devtools-support/
CHICAGO
" » CSS Container Queries: Chrome DevTools Support." Bramus! | Sciencx - Accessed 2024-03-28T17:34:55+00:00. https://www.scien.cx/2021/07/29/css-container-queries-chrome-devtools-support/
IEEE
" » CSS Container Queries: Chrome DevTools Support." Bramus! | Sciencx [Online]. Available: https://www.scien.cx/2021/07/29/css-container-queries-chrome-devtools-support/. [Accessed: 2024-03-28T17:34:55+00:00]
rf:citation
» CSS Container Queries: Chrome DevTools Support | Bramus! | Sciencx | https://www.scien.cx/2021/07/29/css-container-queries-chrome-devtools-support/ | 2024-03-28T17:34:55+00:00
https://github.com/addpipe/simple-recorderjs-demo