• Next Gen CSS: @container
  • Una Kravets
  • The Nuggets translation Project
  • Permanent link to this article: github.com/xitu/gold-m…
  • Translator: Hoarfroster
  • Proofreader: Chorer, Kim Yang

Chrome is experimenting with the CSS @Container query, which is the CSS Containment Level 3 specification supported by Miriam Suzanne of Oddbird and a group of web platform developers. The @container finder enables us to style elements based on the size of the parent container.

The @Container API is unstable and is affected by syntax changes. If you want to try it out for yourself, you may encounter some mistakes. Please report these errors to the appropriate browser engine! The link to report the error is as follows:

  • Chrome
  • Firefox
  • Safari

You can think of this as a media query (@media), but instead of relying on viewPort to adjust the styles, your target element’s parent will adjust the styles.

Container queries will be the biggest change to the Web since CSS3 and will change the way we think about what “responsive design” means.

Viewports and user agents are no longer the only targets for creating responsive layouts and UI styles. With container queries, elements will be able to locate their parent elements and apply their styles accordingly. This means that the same element that exists in a sidebar, body, or header diagram can look completely different depending on its available size and dynamics.

@containerThe instance

In this example, I use two cards with the following tags in the parent:

<div class="card-container">
    <div class="card">
        <figure>.</figure>
        <div>
            <div class="meta">
                <h2>.</h2>
                <span class="time">.</span>
            </div>
            <div class="notes">
                <p class="desc">.</p>
                <div class="links">.</div>
            </div>
            <button>.</button>
        </div>
    </div>
</div>
Copy the code

Then I set the Containment property on the.card-container parent that will query the container style. I also set a relative grid layout on the parent of.card-Container, so its inline-size will change according to that grid. This is what I query for using @container:

.card-container {
  contain: layout inline-size;
  width: 100%;
}
Copy the code

Now I can query the container style to adjust the style! This is very similar to how styles are set with width-based media queries, using max-width when elements are smaller than the specified size and min-width when elements are larger than the specified size.

/* When the parent container width is less than 850px, stop displaying.links and reduce the.time font size */

@container (max-width: 850px) {
  .links {
    display: none;
  }

  .time {
    font-size: 1.25 rem;
  }

  / *... * /
}

/* When the parent container width is less than 650px, reduce the grid spacing between.card elements to 1rem */

@container (max-width: 650px) {
  .card {
    gap: 1rem;
  }

  / *... * /
}
Copy the code

Container query + media query

One of the best features of container queries is the ability to separate the micro layout from the macro layout. We can use container queries to style individual elements, create subtle micro-layouts, and use media queries (macro layouts) to style entire page layouts. This creates a new level of control and makes the interface more responsive.

Here’s another example. It shows the use of media queries for macro layout (i.e. calendar from single panel to multiple panel) and micro layout (i.e. date layout/size and event margin/size movement) to create a beautiful harmonious query.

Container query + CSS grid

One of my favorite ways to see the impact of container queries is to see how they work in the grid. Take the following plant trade UI for example:

This site does not use media queries at all. Instead, we just use container queries and CSS grids to display the gift card components in different views.

In the product grid, the layout uses grid-template-columns: repeat(auto-fit, minmax(230px, 1FR)); Tag creation. This creates a layout that tells the cards to occupy the available decimal space until they reach 230px, and then switches to the next line on the next grid. You can check out more grid tips at 1linelayouts.com.

We then have a container query that sets the card style to a vertical block layout when the card width is less than 350px and converts it to a horizontal inline layout by applying display: Flex (with inline flow by default).

@container (min-width: 350px) {
  .product-container {
    padding: 0.5 rem 0 0;
    display: flex;
  }

  / *... * /
}
Copy the code

This means that each card has its own responsive style. This is another example of how we created a macro layout using a product grid and a micro layout using a product card. Cool!

usage

To use @Container, you first need to create a parent element that has Containment. Contain: Layout Inline-size on the parent level. Since we can currently only apply container queries to inline axes, we can only use inline-size. This also prevents our layout from breaking in the block direction.

Setting contain: Layout inline-size creates a new Containment block and a new block format context that the browser will separate from the rest of the layout, and now we can use the container query!

limit

Currently, you cannot use height-based container queries, only queries along the block axis. In order for the grid element to work with @Container, we need to add a container element. Still, adding containers gives us the desired effect.

Give it a try

You can now experiment with the @container property in Chromium by navigating to the Chrome ://flags page in Chrome Canary and opening the # experimental-container-Queries flag.

If you find any mistakes in your translation or other areas that need to be improved, you are welcome to the Nuggets Translation Program to revise and PR your translation, and you can also get the corresponding reward points. The permanent link to this article at the beginning of this article is the MarkDown link to this article on GitHub.

The Nuggets Translation Project is a community that translates quality Internet technical articles from English sharing articles on nuggets. The content covers Android, iOS, front-end, back-end, blockchain, products, design, artificial intelligence and other fields. If you want to see more high-quality translation, please continue to pay attention to the Translation plan of Digging Gold, the official Weibo, Zhihu column.