LGTM1. This has very strong signals!
On Tue, May 10, 2022 at 9:56 PM Anders Hartvoll Ruud <[email protected]> wrote: > 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 > <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 [email protected]. To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAGH7WqEa9S2-LwjxCQ_PcHpp0PDxb%3D9fwj33wfiP52BL4527Gg%40mail.gmail.com.
