Contact [email protected]

Explainerhttps://css.oddbird.net/rwd/style/explainer

Specificationhttps://drafts.csswg.org/css-contain-3/#style-container

Summary

Adds a style() function to @container rules to make it possible to apply
styles based on the computed values of custom properties of an ancestor
element. style() queries can be combined with size container queries which
shipped in M105.


Blink componentBlink>CSS
<https://bugs.chromium.org/p/chromium/issues/list?q=component:Blink%3ECSS>

TAG reviewhttps://github.com/w3ctag/design-reviews/issues/787

TAG review statusPending

Risks


Interoperability and Compatibility

None of the other vendors have responded to the standards-positions or, to
my knowledge, started implementing. There were concerns raised by an Apple
engineer in https://github.com/w3c/csswg-drafts/issues/7185 mainly for
standard property queries. This intent is for shipping support for custom
property queries only.


*Gecko*: No signal (
https://github.com/mozilla/standards-positions/issues/686)

*WebKit*: No signal (https://github.com/WebKit/standards-positions/issues/57
)

*Web developers*: No signals

*Other signals*:

Activation

Feature detection is not very ergonomic before we add at-prelude testing to
@supports, which requires a resolution for [1]. [1]
https://github.com/w3c/csswg-drafts/issues/6966


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?



Debuggability

DevTools may need to show style containers like it is done with size
container queries today. However, all elements are style containers by
default, so probably not the same type of UI. There is an issue where we
look up the wrong container, that is, always assume that the closest
container supporting logical inline axis queries is the closest one:
https://crbug.com/1378237 If we fix that issue, we will automatically also
implement correct container lookup for pure style containers. That should
work both for highlighting elements querying a given container, and also
list the query for the matched style rule correctly.


Will this feature be supported on all six Blink platforms (Windows, Mac,
Linux, Chrome OS, Android, and Android WebView)?Yes

Is this feature fully tested by web-platform-tests
<https://chromium.googlesource.com/chromium/src/+/main/docs/testing/web_platform_tests.md>
?Yes

Flag name#enable-experimental-web-platform-features / CSSStyleQueries
(Blink)

Requires code in //chrome?False

Tracking bughttps://crbug.com/1302630

Sample links
https://www.bram.us/2022/10/14/container-queries-style-queries
https://una.im/style-queries

Estimated milestones
DevTrial on desktop 107
DevTrial on Android 107

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).


Link to entry on the Chrome Platform Status
https://chromestatus.com/feature/5076875399921664

This intent message was generated by Chrome Platform Status
<https://chromestatus.com/>.

-- 
Rune Lillesveen

-- 
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/CACuPfeSQJOPtK%2BOmFj%2B7F%3DbCqqspoKshc7nDb0fh1BSoHmz95g%40mail.gmail.com.

Reply via email to