Intent to Ship: Container Queries

2981 views
Skip to first unread message

Anders Hartvoll Ruud

unread,
May 10, 2022, 8:56:21 AMMay 10
to blink-dev

Contact emails

and...@chromium.org, fut...@chromium.org


Explainer

https://css.oddbird.net/rwd/query/explainer/


Specification

https://drafts.csswg.org/css-contain-3/#container-queries


Scope

This intent covers: 



However, it does not cover:

  • Style queries. (More about style queries further down in the email).

  • Printing support. That means @container rules will always evaluate to “false” for printing. Printing will be supported when LayoutNGPrinting ships.


Note that this intent depends on full LayoutNG support (minus printing).


Summary

Container queries are similar to @media queries, except that they evaluate against the size of an element instead of the size of the viewport. This allows authors to create components that respond to the available space within a layout.


Example:


/* Use display:block by default, but switch to

   display:flex if there’s enough space. */


.component { container-type: inline-size; }

.component > main { display: block; }


@container (inline-size >= 800px) {

  .component > main { display: flex; }

}


Blink component

Blink>CSS


TAG review

https://github.com/w3ctag/design-reviews/issues/592


TAG review status

Closed without any issues.


Risks



Interoperability and Compatibility



Gecko: In development (https://bugzilla.mozilla.org/show_bug.cgi?id=1744221)

See implementation activity reachable from that bug.


WebKit: In development (https://developer.apple.com/safari/technology-preview/release-notes/#:~:text=Enabled%20CSS%20Container%20Queries%20by%20default)


Web developers: Strongly positive (https://2021.stateofcss.com/en-US/opinions/currently_missing_from_css_wins)


Other signals:


WebView application risks

Does this intent deprecate or change behavior of existing APIs, such that it has potentially high risk for Android WebView-based applications? N/A



Debuggability

Inspector support is implemented, and will be shipped at the same time.


DevTools: Container Queries tooling


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

Yes


https://wpt.fyi/results/css/css-contain/container-queries

https://wpt.fyi/results/css/css-contain/contain-inline-size*


Some WPTs are currently failing in Blink.


We plan to fix the following failures before shipping:



We do not plan to fix the following issues before shipping:


  • https://crbug.com/1302630 Support style() queries

    • Will not be shipped now.

  • https://crbug.com/882385 Style containment content quotes must be scoped to the element's sub-tree

    • None of the engines support style containment for quotes, and we have existing correctness issues.

  • https://crbug.com/1281318 Changing border-box size of orthogonal flow with percentage padding does not re-layout correctly

    • Layout bug independent from Container Queries.


Legacy layout issues (will be fixed by fully shipping LayoutNG [minus print]):



Flag name

CSSContainerQueries


Requires code in //chrome?

False


Tracking bug

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


Estimated milestones

M105



Anticipated spec changes

Open questions about a feature may be a source of future web compat or interop issues. Please list open issues (e.g. links to known github issues in the project for the feature specification) whose resolution may introduce web compat/interop risk (e.g., changing to naming or structure of the API in a non-backward-compatible way).


Style queries: this feature has clear negative signals from some vendors, and it’s unclear if it makes sense to implement this in its current form, or if it makes sense to implement at all. This is relevant for this intent because the initial value of container-type was recently changed to style (a change met with negative reactions from multiple vendors), and shipping without support for the initial value of a property is very undesirable (if possible at all). It is possible that the CSSWG will revert the decision to make style the default container-type. Or, we could make auto the initial value, as proposed in Issue 7202. Either way this issue must be resolved before we actually ship.


Transitions: we are planning to land a change to css-transitions that would change how the before/after-change styles are computed. This is not specific to container queries (it would be a web-facing change in general), nor is it really made worse by shipping CQ first, but I’m still mentioning this issue since CQ was the starting point of that discussion. Note: the animation behavior that is specific to container queries is implemented according to spec.


Link to entry on the Chrome Platform Status

https://chromestatus.com/feature/6525308435955712


Links to previous Intent discussions

Intent to prototype: https://groups.google.com/a/chromium.org/g/blink-dev/c/u1AKdrXhPGI



This intent message was generated by Chrome Platform Status.


TAMURA, Kent

unread,
May 11, 2022, 4:09:23 AMMay 11
to Anders Hartvoll Ruud, blink-dev
LGTM1. This has very strong signals!


--
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/CAKFBnUoVprSbdEnQEJJrp%2BSaYStS5kAgqq575_z9wLG4wbUR6g%40mail.gmail.com.


--
TAMURA Kent
Software Engineer, Google


Yoav Weiss

unread,
May 11, 2022, 5:03:56 AMMay 11
to blink-dev, Kent Tamura, blink-dev, Anders Hartvoll Ruud
LGTM2

It's great to see y'all working with the broader community on this!!

To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+unsubscribe@chromium.org.

Mike West

unread,
May 11, 2022, 5:14:40 AMMay 11
to Yoav Weiss, blink-dev, Kent Tamura, Anders Hartvoll Ruud
LGTM3.

-mike


To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+...@chromium.org.


--
TAMURA Kent
Software Engineer, Google


--
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/c167dcfb-cba1-4534-a3f1-32d1145a6f72n%40chromium.org.

Emilio Cobos Álvarez

unread,
May 16, 2022, 2:02:42 PMMay 16
to Mike West, Yoav Weiss, blink-dev, Kent Tamura, Anders Hartvoll Ruud
Thanks for all your work on this feature and on the spec, it's great.

Can we make sure the outstanding spec issues in here:

https://github.com/w3c/csswg-drafts/labels/css-contain-3

Are resolved before this ships on Chromium? I believe there isn't
anything truly major, but it'd be great to have the spec in a state that
matches what engines are going to implement and ship.

-- Emilio

On 5/11/22 11:14, Mike West wrote:
> LGTM3.
>
> -mike
>
>
> On Wed, May 11, 2022 at 11:04 AM Yoav Weiss <yoav...@chromium.org
> <mailto:yoav...@chromium.org>> wrote:
>
> LGTM2
>
> It's great to see y'all working with the broader community on this!!
>
> On Wednesday, May 11, 2022 at 10:09:23 AM UTC+2 Kent Tamura wrote:
>
> LGTM1. This has very strong signals!
>
>
> On Tue, May 10, 2022 at 9:56 PM Anders Hartvoll Ruud
> <and...@chromium.org <mailto:and...@chromium.org>> wrote:
>
>
> Contact emails
>
> and...@chromium.org <mailto:and...@chromium.org>,
> fut...@chromium.org <mailto:fut...@chromium.org>
>
>
> Explainer
>
> https://css.oddbird.net/rwd/query/explainer/
> *
>
> Size queries
> <https://drafts.csswg.org/css-contain-3/#container-size-query>
>
> *
>
> Container query length units
> <https://drafts.csswg.org/css-contain-3/#container-query-length>
>
> *
>
> Inline-size containment
> <https://drafts.csswg.org/css-contain-3/#containment-inline-size>
>
>
> However, it does not cover:
>
> *
>
> Style queries
> <https://drafts.csswg.org/css-contain-3/#style-container>. (More about style queries further down in the email).
>
> *
>
> Printing support. That means @container rules will
> always evaluate to “false” for printing. Printing will
> be supported when LayoutNGPrinting ships.
>
>
> Note that this intent depends on full LayoutNG support
> (minus printing).
>
>
> Summary
>
> Container queries are similar to @media queries, except that
> they evaluate against the size of an element instead of the
> size of the viewport. This allows authors to create
> components that respond to the available space within a layout.
>
>
> Example:
>
>
> /* Use display:block by default, but switch to
>
>    display:flex if there’s enough space. */
>
>
> .component { container-type: inline-size; }
>
> .component > main { display: block; }
>
>
> @container (inline-size >= 800px) {
>
>   .component > main { display: flex; }
>
> }
>
>
> Blink component
>
> Blink>CSS
> <https://bugs.chromium.org/p/chromium/issues/list?q=component:Blink%3ECSS>
>
>
> TAG review
>
> https://github.com/w3ctag/design-reviews/issues/592
> <https://github.com/w3ctag/design-reviews/issues/592>
>
>
> TAG review status
>
> Closed without any issues.
>
>
> Risks
>
>
>
> Interoperability and Compatibility
>
>
>
> Gecko: In development
> (https://bugzilla.mozilla.org/show_bug.cgi?id=1744221
> <https://bugzilla.mozilla.org/show_bug.cgi?id=1744221>)
>
> See implementation activity reachable from that bug.
>
>
> WebKit: In development
> (https://developer.apple.com/safari/technology-preview/release-notes/#:~:text=Enabled%20CSS%20Container%20Queries%20by%20default <https://developer.apple.com/safari/technology-preview/release-notes/#:~:text=Enabled%20CSS%20Container%20Queries%20by%20default>)
>
>
> Web developers: Strongly positive
> (https://2021.stateofcss.com/en-US/opinions/currently_missing_from_css_wins <https://2021.stateofcss.com/en-US/opinions/currently_missing_from_css_wins>)
>
>
> Other signals:
>
>
> WebView application risks
>
> Does this intent deprecate or change behavior of existing
> APIs, such that it has potentially high risk for Android
> WebView-based applications? N/A
>
>
>
> Debuggability
>
> Inspector support is implemented, and will be shipped at the
> same time.
>
>
> DevTools: Container Queries tooling
> <https://www.google.com/url?q=https://docs.google.com/document/d/1FGwUsRC3UHXJjcJ5H2DhMi2E2bIFY2tmUBuL984UK-I/edit&sa=D&source=docs&ust=1652184066399947&usg=AOvVaw1YREIMddkpZFyhrgKZYykO>
>
>
> Is this feature fully tested by web-platform-tests
> <https://chromium.googlesource.com/chromium/src/+/master/docs/testing/web_platform_tests.md>?
>
> Yes
>
>
> https://wpt.fyi/results/css/css-contain/container-queries
> <https://wpt.fyi/results/css/css-contain/container-queries?label=master&label=experimental&aligned>
>
> https://wpt.fyi/results/css/css-contain/contain-inline-size*
> <https://wpt.fyi/results/css/css-contain?label=master&label=experimental&aligned&q=%2Fcss%2Fcss-contain%2Fcontain-inline-size>
>
>
> Some WPTs are currently failing in Blink.
>
>
> We plan to fix the following failures before shipping:
>
>
> *
>
> https://crbug.com/1273913
> <https://crbug.com/1273913>::first-line dynamic update
> in outer container for container queries fail
>
> *
>
> https://crbug.com/1322881
> <https://crbug.com/1322881>Intrinsic sizing not working
> for replaced elements with contain:inline-size
>
>
> We do notplan to fix the following issues before shipping:
>
>
> *
>
> https://crbug.com/1302630
> <https://crbug.com/1302630>Support style() queries
>
> o
>
> Will not be shipped now.
>
> *
>
> https://crbug.com/882385 <https://crbug.com/882385>Style
> containment content quotes must be scoped to the
> element's sub-tree
>
> o
>
> None of the engines support style containment for
> quotes, and we have existing correctness issues.
>
> *
>
> https://crbug.com/1281318
> <https://crbug.com/1281318>Changing border-box size of
> orthogonal flow with percentage padding does not
> re-layout correctly
>
> o
>
> Layout bug independent from Container Queries.
>
>
> Legacy layout issues (will be fixed by fully shipping
> LayoutNG [minus print]):
>
>
> *
>
> https://crbug.com/1294155 <https://crbug.com/1294155>
>
> *
>
> https://crbug.com/829028 <https://crbug.com/829028>
>
> *
>
> https://crbug.com/1307656 <https://crbug.com/1307656>
>
>
> Flag name
>
> CSSContainerQueries
>
>
> Requires code in //chrome?
>
> False
>
>
> Tracking bug
>
> https://bugs.chromium.org/p/chromium/issues/detail?id=1145970 <https://bugs.chromium.org/p/chromium/issues/detail?id=1145970>
>
>
> Estimated milestones
>
> M105
>
>
>
> Anticipated spec changes
>
> Open questions about a feature may be a source of future web
> compat or interop issues. Please list open issues (e.g.
> links to known github issues in the project for the feature
> specification) whose resolution may introduce web
> compat/interop risk (e.g., changing to naming or structure
> of the API in a non-backward-compatible way).
>
>
> Style queries: this feature has clear negative signals
> <https://github.com/w3c/csswg-drafts/issues/7185>from some
> vendors, and it’s unclear if it makes sense to implement
> this in its current form, or if it makes sense to implement
> at all. This is relevant for this intent because the initial
> valueof container-typewas recently changed to style (a
> change met with negative reactions from multiple vendors
> <https://github.com/w3c/csswg-drafts/issues/7066>), and
> shipping without support for the initial value of a property
> is very undesirable (if possible at all). It is possible
> that the CSSWG will revert the decision to make stylethe
> default container-type. Or, we could make auto the initial
> value, as proposed in Issue 7202
> <https://github.com/w3c/csswg-drafts/issues/7202>. Either
> way this issue must be resolved before we actually ship.
>
>
> Transitions: we are planning to land a change
> <https://github.com/w3c/csswg-drafts/issues/6398#issuecomment-904754453>to css-transitions that would change how the before/after-change styles are computed. This is not specific to container queries (it would be a web-facing change in general), nor is it really made worse by shipping CQ first, but I’m still mentioning this issue since CQ was the starting point of that discussion. Note: the animation behavior <https://drafts.csswg.org/css-contain-3/#animated-containers>that isspecific to container queries is implemented according to spec.
>
>
> Link to entry on the Chrome Platform Status
>
> https://chromestatus.com/feature/6525308435955712
> <https://chromestatus.com/feature/6525308435955712>
>
>
> Links to previous Intent discussions
>
> Intent to prototype:
> https://groups.google.com/a/chromium.org/g/blink-dev/c/u1AKdrXhPGI <https://groups.google.com/a/chromium.org/g/blink-dev/c/u1AKdrXhPGI>
>
>
>
> This intent message was generated by Chrome Platform Status
> <https://chromestatus.com/>.
>
>
> --
> 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
> <mailto:blink-dev+...@chromium.org>.
> To view this discussion on the web visit
> https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAKFBnUoVprSbdEnQEJJrp%2BSaYStS5kAgqq575_z9wLG4wbUR6g%40mail.gmail.com <https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAKFBnUoVprSbdEnQEJJrp%2BSaYStS5kAgqq575_z9wLG4wbUR6g%40mail.gmail.com?utm_medium=email&utm_source=footer>.
>
>
>
> --
> TAMURA Kent
> Software Engineer, Google
>
>
> --
> 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
> <mailto:blink-dev+...@chromium.org>.
> To view this discussion on the web visit
> https://groups.google.com/a/chromium.org/d/msgid/blink-dev/c167dcfb-cba1-4534-a3f1-32d1145a6f72n%40chromium.org <https://groups.google.com/a/chromium.org/d/msgid/blink-dev/c167dcfb-cba1-4534-a3f1-32d1145a6f72n%40chromium.org?utm_medium=email&utm_source=footer>.
>
> --
> 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
> <mailto:blink-dev+...@chromium.org>.
> To view this discussion on the web visit
> https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAKXHy%3De65OBn7fTyRBWHpPCFKNbKfx_306v8aizUvhrJkszjGQ%40mail.gmail.com <https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAKXHy%3De65OBn7fTyRBWHpPCFKNbKfx_306v8aizUvhrJkszjGQ%40mail.gmail.com?utm_medium=email&utm_source=footer>.
OpenPGP_0xE1152D0994E4BF8A.asc

Rune Lillesveen

unread,
Jun 29, 2022, 4:45:06 AMJun 29
to Anders Hartvoll Ruud, blink-dev
On Tue, May 10, 2022 at 2:56 PM Anders Hartvoll Ruud <and...@chromium.org> wrote:

Contact emails

and...@chromium.org, fut...@chromium.org


Explainer

https://css.oddbird.net/rwd/query/explainer/


Specification

https://drafts.csswg.org/css-contain-3/#container-queries


Scope

This intent covers: 



However, it does not cover:

  • Style queries. (More about style queries further down in the email).

  • Printing support. That means @container rules will always evaluate to “false” for printing. Printing will be supported when LayoutNGPrinting ships.


Note that this intent depends on full LayoutNG support (minus printing).


Table fragmentation in LayoutNG will not be shipped in M105, but expected to ship in M106. The consequence is that if an author combines table layout and size container queries inside a multicolumn layout, container queries will not work in that context in M105.

This has been discussed with a couple of API owners and considered to be an acceptable bug for the first release.

We have added a console warning to notify authors about this (including the printing case)

--
Rune Lillesveen

Reply all
Reply to author
Forward
0 new messages