Intent to Ship: CSS Name-only Container Queries

[Rune Lillesveen]

Contact emails

fut...@chromium.org

Specification

https://drafts.csswg.org/css-conditional-5/#container-rule

Summary

A CSS query container can be queried based on its container-name only, and the container does not need any container-type set:

  <style>

    #container { container-name: --foo; }

    @container --foo {

      input { background-color: green; }

    }

  <style>

  <div id="container">

    <div><input></div>

  </div>

Previously, @container required some query in addition to the name.

Blink component

Blink>CSS

Web Feature ID

container-queries

Motivation

Catch up with spec and other implementations which are about to ship support for name-only queries.

Initial public proposal

No information provided

TAG review

No information provided

TAG review status

Not applicable

Goals for experimentation

None

Risks

Interoperability and Compatibility

Since both WebKit and Gecko are about to ship, not shipping would be an interop risk. There is a potential for contents of existing @container blocks to start applying, where they would currently be skipped, but as they would be of no use today the risk should be low.

Gecko: Shipped/Shipping (https://bugzilla.mozilla.org/show_bug.cgi?id=2016474) Passes tests In Firefox nightly 151.0a1

WebKit: Shipped/Shipping (https://bugs.webkit.org/show_bug.cgi?id=302433) Passses tests in Safari TP 239

Web developers: No signals

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?

No information provided

Debuggability

No information provided

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

Yes

Is this feature fully tested by web-platform-tests?

Yes
https://wpt.fyi/results/css/css-conditional/container-queries/query-container-name.html?label=experimental&label=master&aligned https://wpt.fyi/results/css/css-conditional/container-queries/query-container-name-dynamic.html?label=experimental&label=master&aligned

Flag name on about://flags

enable-experimental-web-platform-features

Finch feature name

ContainerNameOnly

Rollout plan

Will ship enabled for all users

Requires code in //chrome?

False

Tracking bug

https://crbug.com/40287550

Estimated milestones

Shipping on desktop	148
DevTrial on desktop	145
Shipping on Android	148
DevTrial on Android	145
Shipping on WebView	148

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

No information provided

Link to entry on the Chrome Platform Status

https://chromestatus.com/feature/5184267522015232?gate=4703221115387904

This intent message was generated by Chrome Platform Status.

--

Rune Lillesveen

[Rick Byers]

Sounds close to a bugix to me, LGTM1

--
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 visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CACuPfeQn0ADOYv0EyWACyh317ZwgeMwGdPSFg%3DTdHcu5ANkymg%40mail.gmail.com.

[Daniel Clark]

LGTM2

To view this discussion visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAFUtAY-KRAo0O54hjCK0e5gvLyMcJnh3vdajdNv919BVnma8-A%40mail.gmail.com.