Comments on: Next Gen CSS: @container

By: Zei

Zei — Sun, 23 May 2021 06:48:57 +0000

I assume this is going to sit in experimental for years like backdrop-filter. Something we really want, that probably works perfectly fine already, but we won’t see for years.

I hope I’m wrong but I’d slap down $100 on it not happening for at least a year.

By: Neil

Neil — Wed, 19 May 2021 16:38:43 +0000

In reply to Mateusz. Hey. The limitation about adding @container to a grid element. Is this going to be something we’ll have to work around in the shipping version of Container Queries or will there be a way to make a grid element be a container without having to add a wrapping element? Thanks!

By: Mika

Mika — Tue, 18 May 2021 21:30:07 +0000

In reply to Ben.

It feels so weird to think this is finally coming true.
Many thanks to those involved who made this possible!

Container Queries, Grid, and Web Components, there’s no stopping us now (shut up Safari!)

By: Jim Jones

Jim Jones — Tue, 18 May 2021 18:36:45 +0000

This sounds like a trick I can use for a cemetery website using the grid for individual plots and using query to change the amount and type of information about who is buried in that lot depending on size. Exciting!

By: Una Kravets

Una Kravets — Tue, 18 May 2021 15:25:01 +0000

In reply to Mateusz.

The polyfill uses resize observer :) https://github.com/jsxtools/cqfill

By: Mateusz

Mateusz — Tue, 18 May 2021 08:53:35 +0000

So it’s more or less a CSS equivalent of the resize observer – something I hoped for a long time ago!

By: Miriam Suzanne

Miriam Suzanne — Tue, 18 May 2021 00:27:50 +0000

In reply to Ben. Any elements that are targeted by a selector inside the @container will query their nearest ancestor container. So if you set up both .sidebar and main as containers, you can put elements inside either one, and each element will query the container that it is in. You can nest containers as much as you like, and elements will always query the closest one.

By: Robyn

Robyn — Mon, 17 May 2021 23:33:58 +0000

In reply to Tobi Reif. very cool Tobi

By: Tobi Reif

Tobi Reif — Mon, 17 May 2021 08:38:14 +0000

It will be so great to have this as native CSS feature!
Until then there luckily are libs :)
In this demo for example there are many container queries:
https://tobireif.com/demos/grid/
It uses the lib https://github.com/eqcss/eqcss/ and its syntax.

By: Damian

Damian — Wed, 12 May 2021 21:40:04 +0000

I wonder how far is it from introducing this in the official Chrome version

By: Ben D Carpenter

Ben D Carpenter — Wed, 12 May 2021 15:17:49 +0000

In reply to Ben. So we write queries within @container which references the single parent container with the contain property specified. How would this work if you wanted multiple containers?

By: David

David — Wed, 12 May 2021 06:44:00 +0000

Hope to see this finalised soon, it is the holy grail to making UI components reusable.

By: Una Kravets

Una Kravets — Wed, 12 May 2021 00:07:37 +0000

In reply to Ben. Yes! You can set containment on more than one parent, and query against those parents.

By: Una Kravets

Una Kravets — Wed, 12 May 2021 00:07:03 +0000

In reply to Jason. Yes! You can set containment on more than one parent, and query against those parents.

By: Chris Coyier

Chris Coyier — Tue, 11 May 2021 23:29:20 +0000

In reply to Ben. I don't think so, but I'm just wrapping my brain around all this. I believe in the current spec you don't specificity even one container. It just assumes you mean the parent element of whatever it is you select inside.