and...@chromium.org, fut...@chromium.org
https://css.oddbird.net/rwd/query/explainer/
https://drafts.csswg.org/css-contain-3/#container-queries
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).
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; }
}
https://github.com/w3ctag/design-reviews/issues/592
Closed without any issues.
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:
Does this intent deprecate or change behavior of existing APIs, such that it has potentially high risk for Android WebView-based applications? N/A
Inspector support is implemented, and will be shipped at the same time.
DevTools: Container Queries tooling
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]):
CSSContainerQueries
False
https://bugs.chromium.org/p/chromium/issues/detail?id=1145970
M105
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.
https://chromestatus.com/feature/6525308435955712
Intent to prototype: https://groups.google.com/a/chromium.org/g/blink-dev/c/u1AKdrXhPGI
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.
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.
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.
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.
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).