Intent to Prototype: Container Queries

6,217 views
Skip to first unread message

Anders Hartvoll Ruud

unread,
Nov 5, 2020, 8:18:40 AM11/5/20
to blink-dev

Contact emails

(Anyone on the style team)
mir...@oddbird.net (Especially for spec questions)

Explainer

https://github.com/dbaron/container-queries-implementability#proposal

Specification

None yet.

Summary

Container Queries allow authors to style elements according to the size of a container. This is similar to a @media query, except that it evaluates against a container instead of the viewport.


The plan for the prototype is to use Miriam's proposed alternative, i.e. containers will be marked with "contain: size", and a new at-rule "@container (min-width: 100px) { ... }" specifies the rules that apply given the size of the container. This is not at all finalized, but the underlying problems we need to solve in Blink are (mostly) the same regardless of how the feature is accessed, so we'll for now use this proposal as the temporary syntax.


One thing to note about container queries is that it requires interleaving style calculation and layout. That is, we can no longer fully calculate the style for everything, and then afterwards do layout, since container queries allow the style to depend on the layout of a container. How feasible/complex this is to implement in Blink is unclear at this point, and is a key part of what we need to figure out during prototyping.


Blink component

Blink>CSS

Motivation

Top requested "missing feature" from CSS.


TAG review

Not filed yet.

TAG review status

Not started

Risks


Interoperability and Compatibility

None


Gecko: Proposal from dbaron, otherwise I'm not aware of any signal.

WebKit: No signal. I suppose it's not too soon to ask webkit-dev about their opinion re. the underlying feature. I'll do so and report back.

Web developers: Positive (see Motivation).


Will this feature be supported on all six Blink platforms (Windows, Mac, Linux, Chrome OS, Android, and Android WebView)?

Yes


Is this feature fully tested by web-platform-tests?

No

Tracking bug

https://bugs.chromium.org/p/chromium/issues/detail?id=1145970

Link to entry on the Chrome Platform Status

https://chromestatus.com/feature/6525308435955712

This intent message was generated by Chrome Platform Status.

Anders Hartvoll Ruud

unread,
Nov 5, 2020, 10:25:08 AM11/5/20
to Jake Archibald, blink-dev
On Thu, Nov 5, 2020 at 4:05 PM Jake Archibald <jakear...@chromium.org> wrote:
This is exciting!

Will this prototype look at size containment along a single axis (as mentioned in dbaron's proposal)? If our intention is to require a fixed size across both axes, I'm not sure we can say that developers are positive about it. My gut feeling is that most developers are only interested in this feature if they still get layout flow in one axis.

Right, Miriam mentioned as much. We'll get to that eventually, but I think it makes sense to start with contain:size for prototyping purposes. (There are enough other problems to solve beyond single-axis containment).

On Thu, Nov 5, 2020 at 4:05 PM Jake Archibald <jakear...@chromium.org> wrote:
This is exciting!

Will this prototype look at size containment along a single axis (as mentioned in dbaron's proposal)? If our intention is to require a fixed size across both axes, I'm not sure we can say that developers are positive about it. My gut feeling is that most developers are only interested in this feature if they still get layout flow in one axis.

Jake Archibald

unread,
Nov 5, 2020, 11:17:41 AM11/5/20
to blink-dev, Anders Hartvoll Ruud
This is exciting!

Will this prototype look at size containment along a single axis (as mentioned in dbaron's proposal)? If our intention is to require a fixed size across both axes, I'm not sure we can say that developers are positive about it. My gut feeling is that most developers are only interested in this feature if they still get layout flow in one axis.

On Thursday, November 5, 2020 at 1:18:40 PM UTC Anders Hartvoll Ruud wrote:

Mathias Bynens

unread,
Nov 6, 2020, 2:19:35 AM11/6/20
to Anders Hartvoll Ruud, blink-dev, fut...@chromium.org, mir...@oddbird.net, xiaoc...@chromium.org, Nicole Sullivan
Do you as the feature owners/contacts/spec authors have any opinions on what kind of DevTools support is required for developers to successfully adopt this (beyond basic viewing/editing support)?


--
You received this message because you are subscribed to the Google Groups "blink-dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+...@chromium.org.
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAKFBnUoAku0Nwpi1F%2BYE5vV8D5XN6%3DmqK1TLSEa7PHQzdrjQ9Q%40mail.gmail.com.

Una Kravets

unread,
Nov 6, 2020, 9:19:37 AM11/6/20
to Mathias Bynens, Anders Hartvoll Ruud, blink-dev, fut...@chromium.org, Miriam Suzanne, xiaoc...@chromium.org, Nicole Sullivan
Mathias, I feel like the ability to resize an element's parent and apply other preferences here would be helpful in DevTools, just as developers frequently use viewport resizing to debug responsive page-based designs.
- Una

Bramus Van Damme

unread,
Nov 6, 2020, 9:27:46 AM11/6/20
to blink-dev, unakr...@google.com, and...@chromium.org, blink-dev, Rune Lillesveen, Miriam Suzanne, xiaoc...@chromium.org, Nicole Sullivan, Mathias Bynens
Adding to Una's suggestion, I — as a developer — would like to see:
  • A visual pill indicator in the DOM tree, right next to elements that have "contain: size;" applied (cfr. the grid indicator we already have)
  • A way to see what the limiting container root for an affected child element is.
Those two could certainly help while debugging issues.

Mathias Bynens

unread,
Nov 6, 2020, 9:52:05 AM11/6/20
to Bramus Van Damme, blink-dev, unakr...@google.com, and...@chromium.org, Rune Lillesveen, Miriam Suzanne, xiaoc...@chromium.org, Nicole Sullivan
Thanks, Una and Bramus! I’ve filed https://bugs.chromium.org/p/chromium/issues/detail?id=1146422 to track DevTools support. If anyone else has ideas please let us know.

Batchman mobil

unread,
Nov 10, 2020, 12:10:04 PM11/10/20
to blink-dev, Jake Archibald, and...@chromium.org
maybe, by limiting layout-changes to the inner parts of the component, there is no need to limit any axis ... Some thing are already possible within the actual css spec (see my article: https://css-tricks.com/the-raven-technique-one-step-closer-to-container-queries/).

but whatever the final spec might look like,  it would be great to have container based queries !
Reply all
Reply to author
Forward
0 new messages