Contact emails [email protected], [email protected]
Explainer https://css.oddbird.net/rwd/query/explainer/ Specification 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 <https://bugs.chromium.org/p/chromium/issues/list?q=component:Blink%3ECSS> 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 <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 ::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]): - https://crbug.com/1294155 - https://crbug.com/829028 - https://crbug.com/1307656 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 <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 value of container-type was 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 style the 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 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 <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 [email protected]. 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.
