Intent to Ship: CSS Anchor Positioning: Unwrapped inset-area()

22 views
Skip to first unread message

Anders Hartvoll Ruud

unread,
4:47 AM (3 hours ago) 4:47 AM
to blink-dev

Contact emails

and...@chromium.org

Explainer

None

Specification

https://drafts.csswg.org/css-anchor-position-1/#position-try-fallbacks

Summary

Replaces the inset-area() function with inset-area values directly within position-try-fallbacks. This means that you now just write e.g. position-try-fallbacks:top instead of position-try-fallbacks:inset-area(top).


The CSSWG made this change shortly after CSS Anchor Positioning shipped in Blink:

https://github.com/w3c/csswg-drafts/issues/10320#issuecomment-2137882897



Blink component

Blink>CSS

TAG review

None

TAG review status

Not applicable

Risks



Interoperability and Compatibility


Searching for existing cases of "inset-area(" in HTTP Archive, I found just a single match out of 638589186 rows:

https://css3test.com/tests/css-anchor-position-1.js


Query used:

#standardSQL

SELECT response_bodies.url

FROM `httparchive.response_bodies.2024_06_01_desktop` AS response_bodies

WHERE REGEXP_CONTAINS(response_bodies.response_body, r'inset\-area\(')


Gecko: No signal

WebKit: No signal

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?

None



Debuggability

None



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

No

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

Yes

Flag name on chrome://flags

None

Finch feature name

CSSInsetAreaValue

Requires code in //chrome?

False

Estimated milestones

Shipping on desktop128
Shipping on Android128
Shipping on WebView128


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

None

Link to entry on the Chrome Platform Status

https://chromestatus.com/feature/5116199771045888?gate=5071381116223488

This intent message was generated by Chrome Platform Status.

Yoav Weiss (@Shopify)

unread,
7:35 AM (1 minute ago) 7:35 AM
to blink-dev, Anders Hartvoll Ruud


On Wednesday, July 3, 2024 at 10:47:21 AM UTC+2 Anders Hartvoll Ruud wrote:


Summary

Replaces the inset-area() function with inset-area values directly within position-try-fallbacks. This means that you now just write e.g. position-try-fallbacks:top instead of position-try-fallbacks:inset-area(top).


Just to clarify - this removes the inset-area function?
 


The CSSWG made this change shortly after CSS Anchor Positioning shipped in Blink:

https://github.com/w3c/csswg-drafts/issues/10320#issuecomment-2137882897



Blink componentBlink>CSS

TAG reviewNone

TAG review statusNot applicable


Risks


Interoperability and Compatibility


Searching for existing cases of "inset-area(" in HTTP Archive, I found just a single match out of 638589186 rows:

https://css3test.com/tests/css-anchor-position-1.js


Do you know if this was used in a production site?
From the name, one can assume it's a demo site..
 


Query used:

#standardSQL

SELECT response_bodies.url

FROM `httparchive.response_bodies.2024_06_01_desktop` AS response_bodies

WHERE REGEXP_CONTAINS(response_bodies.response_body, r'inset\-area\(')


Gecko: No signal

WebKit: No signal

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?

None



Debuggability

None



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

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

Flag name on chrome://flagsNone

Finch feature nameCSSInsetAreaValue

Requires code in //chrome?False

Estimated milestonesShipping on desktop128Shipping on Android128Shipping on WebView128

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

None

Reply all
Reply to author
Forward
0 new messages