Intent to Ship: Container Queries
Anders Hartvoll Ruud
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
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:
https://crbug.com/1273913 ::first-line dynamic update in outer container for container queries fail
https://crbug.com/1322881 Intrinsic sizing not working for replaced elements with contain:inline-size
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
--
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.
Software Engineer, Google
Yoav Weiss
To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+unsubscribe@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.
Mike West
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
--
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
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
>
>
> Contact emails
>
> and...@chromium.org <mailto:and...@chromium.org>,
> fut...@chromium.org <mailto:fut...@chromium.org>
>
>
> Explainer
>
> https://css.oddbird.net/rwd/query/explainer/
>
>
> Specification
>
> https://drafts.csswg.org/css-contain-3/#container-queries
> <https://drafts.csswg.org/css-contain-3/#container-queries>
>
>
> Scope
>
> This intent covers:
>
>
>
> 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
>
>
> 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
>
>
> 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
>
> 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/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
> in outer container for container queries fail
>
>
> https://crbug.com/1322881
> for replaced elements with contain:inline-size
>
>
>
>
> *
>
> https://crbug.com/1302630
> o
> Will not be shipped now.
>
>
> https://crbug.com/882385 <https://crbug.com/882385>Style
> element's sub-tree
>
> None of the engines support style containment for
> quotes, and we have existing correctness issues.
>
>
> https://crbug.com/1281318
> 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]):
>
>
>
> 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
>
>
> 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
> this in its current form, or if it makes sense to implement
> at all. This is relevant for this intent because the initial
> 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
>
>
> Transitions: we are planning to land a change
>
> 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:
>
>
> This intent message was generated by Chrome Platform Status
>
> --
> 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
>
>
> --
> 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
> --
> 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
Rune Lillesveen
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).