PHPnews.io

CSS Container Queries: Chrome DevTools Support

Written by Bram.us / Original link on Jul. 29, 2021

css-container-queries-devtools.png

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.

https://www.bram.us/wordpress/wp-content/uploads/2021/07/css-container-queries-devtools.mp4

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:

css-container-queries-devtools-parts-560x257.png

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:

CSS Container Queries: Chrome DevTools Support

🔗 https://t.co/WycCdhjsH7

🏷 #ContainerQueries #devtools #GoogleChrome pic.twitter.com/lvQcBBV7Sr

— Bram.us (@bramusblog) July 29, 2021

~

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

🗣 This post originally was a set of tweets.

bram bram bram lornajane bram

« Symfony 4.4.29 released - Phive: Secure, Easy, and Contained Phar Manager »