Intent to Prototype: Container Queries

[Anders Hartvoll Ruud]

Contact emails

(Anyone on the style team)

and...@chromium.org

fut...@chromium.org

mir...@oddbird.net (Especially for spec questions)

xiaoc...@chromium.org

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]

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]

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]

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]

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

To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CADizRgZoW-_4LxdJYs9wEuAw0EUS35DEAzV%3DDBXLK0n8cwHabw%40mail.gmail.com.

[Bramus Van Damme]

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]

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]

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 !