Alisha  Larkin

Alisha Larkin

1622872200

Future of CSS — Container Query

A web page consists of different sections and components, and we make them responsive by using CSS media queries. There is nothing wrong with that, but it has limitations.

To use container queries we have to tell the container (the parent of the element we want to apply the query to) that we care about its dimensions, we do this with the new contain property.

CSS Containment 🔥

<h1>My blog</h1>
<section>
  <h2>Heading of a nice section</h2>
  <p>Content here.</p>
</section>
<section>
  <h2>Another heading of another section</h2>
  <p>More content here.</p>
</section>
section {
  contain: content;
}

1. none

Indicates the element renders as normal, with no containment applied.

2. strict

Indicates that all containment rules except style are applied to the element. This is equivalent to contain: size layout paint.

3. content

If we give each <section> the contain property with a value of content, when new elements are inserted the browser understands it does not need to relayout or repaint any area outside of the containing element’s subtree, although if the <section> is styled such that its size depends on its contents (e.g. with height: auto), then the browser may need to account for its size changing).

The content value is shorthand for contain: layout paint .

It tells the browser that the internal layout of the element is totally separate from the rest of the page, and that everything about the element is painted inside its bounds.

4. size

It does not offer much in the way of performance optimizations when used on its own.

If you turn on contain: size you need to also specify the size of the element you have applied this to. It will end up being zero-sized in most cases, if you don’t manually give it a size.

5. layout

Indicates that nothing outside the element may affect its internal layout and vice versa.

6. style

Indicates that, for properties that can have effects on more than just an element and its descendants, those effects don’t escape the containing element. Note that this value is marked “at-risk” in the spec and may not be supported everywhere.

7. paint

Indicates that descendants of the element don’t display outside its bounds. If the containing box is offscreen, the browser does not need to paint its contained elements — these must also be offscreen as they are contained completely by that box. And if a descendant overflows the containing element’s bounds, then that descendant will be clipped to the containing element’s border-box.

When we use media queries, most of the time we care about the available width (or inline-size).

NOTE: You can which will update as the spec is formed.

#beginner #tutorial #front-end-development #css

Future of CSS — Container Query