Add BCD for CSS Anchor Positioning spec #22813

chrisdavidmills · 2024-04-09T18:00:27Z

Summary

CSS Anchor Positioning is set to be released in Chrome 125. The associated Chrome Status entry does not appear to be very up-to-date, but I have been assured by Chrome engineering that this is the case.

This PR adds BCD for all the features in the spec, namely:

The anchor-name property
The anchor-scope property
The position-anchor property
The position-visibility property
The anchor() function
I've also added a subfeature to each of the properties that support anchor() as a value:
- top
- left
- bottom
- right
- inset-block-start
- inset-block-end
- inset-inline-start
- inset-inline-end
- inset-block
- inset-inline
- inset
The anchor-center value, which is supported on the following properties (I've added a subfeature for each):
- justify-self
- align-self
- justify-items
- align-items
The anchor-size() function
I've also added a subfeature to each of the properties that support anchor-size() as a value:
- width
- height
- min-width
- min-height
- max-width
- max-height
- block-size
- inline-size
- min-block-size
- min-inline-size
- max-block-size
- max-inline-size
The inset-area property
The position-try-options property
The position-try-order property
The position-try shorthand property
The @position-try at-rule
The CSSPositionTryRule CSSOM interface and its properties:
- name
- style

Note that there are features that don't appear to be supported yet in Chrome, as of the creation of this PR — the anchor-scope property, and the position-try* properties/@position-try at-rule. AFAIUI, these should be added/enabled fairly soon, so I've added them in for now. I'll hopefully get a confirmation soon either way, so I can remove/retest as appropriate.

Note that there are also a couple of features that Chrome supports but aren't in a spec yet (see https://github.com/whatwg/html/pull/9144/files):

The HTML anchor attribute, used to declare the ID of an element that you want this element to be anchored to (i.e. its anchor element).
The Element.anchorElement property, used to access a reference to an element's anchor element.

I also added in data points for Chrome/CxA 125, so that my BCD doesn't error out.

Test results and supporting details

Related issues

lukewarlow · 2024-04-11T11:40:32Z

I'm very dubious of that version 125 number. There's not afaik been an intent to ship yet, and https://chromiumdash.appspot.com/schedule suggests the cut off for Chrome 125 was April 1st?

Edit: okay that's an intent to ship now

chrisdavidmills · 2024-04-11T12:08:35Z

I'm very dubious of that version 125 number. There's not afaik been an intent to ship yet, and https://chromiumdash.appspot.com/schedule suggests the cut off for Chrome 125 was April 1st?

@lukewarlow yeah, that's a good point. @mfreed7 / @rachelandrew, do you have any updated information on this?

mfreed7 · 2024-04-11T23:13:00Z

I'm very dubious of that version 125 number. There's not afaik been an intent to ship yet, and https://chromiumdash.appspot.com/schedule suggests the cut off for Chrome 125 was April 1st?

@lukewarlow yeah, that's a good point. @mfreed7 / @rachelandrew, do you have any updated information on this?

https://groups.google.com/a/chromium.org/g/blink-dev/c/jGTYNuidPRs

github-actions · 2024-04-17T05:40:00Z

This pull request has merge conflicts that must be resolved before it can be merged.

Elchi3 · 2024-04-18T12:15:09Z

api/Element.json

@@ -223,6 +223,39 @@
 }
 }
 },
+ "anchorElement": {


The spec PR adds this to HTMLElement not Element. Also, I don't see Chrome 125 shipping this. Should we remove this for now?

Yeah this is not included in what's shipping so I wouldn't include it in this dataset.

Ooops! In my next commit, I've moved it to HTMLElement.

The thing is though, it is supported, not behind a flag, in Canary (I've tested it). I'm guessing it just won't be shipped in Chrome stable for some time. So I feel like it is useful to keep this data for folks doing testing of preview features.

How can we represent features in this state? I thought we used to have some kind of "preview" value to use for this, but I can't find mention of it in the BCD data schema doc.

Thanks for moving it. See #22813 (review) for setting preview and partial implementation because it is on the wrong interface at the moment.

Just to confirm - the anchor attribute won’t ship in 125. (And current Canaries and Beta should not support it - Chris, please file a bug if you see some observable support.) We are still hoping to ship it soon once the spec discussion concludes, but I don’t know when that will be.

@mfreed7 OK, filed at https://issues.chromium.org/issues/335744345. Is that OK? I've never filed a Chromium bug before ;-)

So I should just remove this for now?

And, can I clarify — this is just the anchorElement property we are talking about? The anchor HTML attribute is still shipping?

I'm removing the anchor attribute in #22910.

Thanks for filing the bug - I just commented there. I suspect you have Experimental Web Platform Features enabled, which is why you see the anchorElement property available. Neither the anchor content attribute nor the anchorElement IDL attribute are shipping in Chrome in 125 or likely 126 at least.

@mfreed7 OK, filed at https://issues.chromium.org/issues/335744345. Is that OK? I've never filed a Chromium bug before ;-)

Also, yes of course, that was perfect!

Elchi3

Thanks for your work on this Chris. I double-checked all of this against the @openwebdocs BCD collector and left some comments.

need to have sub features for property values.
anchorElement should probably be removed
anchor-scope seem unsupported, also remove?
What about adding the CSSPositionTryDescriptors interface?

css/properties/anchor-name.json

css/properties/anchor-scope.json

css/properties/inset-area.json

css/properties/position-try-options.json

css/properties/position-try-order.json

css/properties/position-visibility.json

Co-authored-by: Florian Scholz <[email protected]>

…rowser-compat-data into css-anchor-positioning

chrisdavidmills · 2024-04-19T10:45:19Z

@Elchi3 ok, I think I've done everything you asked for here, except for CSSPositionTryDescriptors — that wasn't in the spec when I first submitted this PR.

Can you show me how to go about generating BCD for this? There's over 70 properties 😱

Elchi3 · 2024-04-19T10:49:58Z

Thanks Chris, so now you know why I said let's generate this stuff :))

A gist for you for CSSPositionTryDescriptors from the collector: https://gist.github.com/Elchi3/2fcdc552ec5defba79ffd789e398f901 (Doesn't yet contain spec_urls.)

api/HTMLElement.json

Elchi3

Thanks Chris! Ready from my side! 👍

chrisdavidmills · 2024-04-21T21:08:32Z

Super awesome, thanks @Elchi3!

Add BCD for CSS Anchor Positioning spec

7643577

chrisdavidmills marked this pull request as draft April 10, 2024 09:59

chrisdavidmills added 2 commits April 10, 2024 11:55

Update spec_urls to latest editors draft

1ff7738

Add position-visibility property

5a7e582

chrisdavidmills mentioned this pull request Apr 12, 2024

Editorial review: CSS Anchor Positioning landing page and guide mdn/content#33058

Merged

github-actions bot added the merge conflicts 🚧 This PR needs to merge latest "main" branch to resolve a merge conflict or other issue. label Apr 17, 2024

Merge branch 'main' into css-anchor-positioning

0d6d174

github-actions bot removed data:browsers 🌍 Data about browsers (versions, release dates, etc). This data is used for validation. merge conflicts 🚧 This PR needs to merge latest "main" branch to resolve a merge conflict or other issue. labels Apr 17, 2024

Elchi3 reviewed Apr 18, 2024

View reviewed changes

Elchi3 requested changes Apr 18, 2024

View reviewed changes

chrisdavidmills and others added 9 commits April 19, 2024 10:53

Move anchorElement to HTMLElement

bf3f4b8

Remove anchor-scope

0c0154b

Update css/properties/anchor-name.json

29a8706

Co-authored-by: Florian Scholz <[email protected]>

Add position-visibility value subfeatures

c3df92a

Merge branch 'main' into css-anchor-positioning

bef9b23

Merge branch 'css-anchor-positioning' of github.com:chrisdavidmills/b…

afc0bca

…rowser-compat-data into css-anchor-positioning

Add position-try-order value subfeatures, and fix anchor-name data

e088af5

Add position-try-options value subfeatures

58894c2

Addd inset-area value subfeatures

5a9dd58

Elchi3 reviewed Apr 19, 2024

View reviewed changes

api/HTMLElement.json Outdated Show resolved Hide resolved

chrisdavidmills added 3 commits April 19, 2024 14:30

Add data for CSSPositionTryDescriptors

a7fb31b

Update HTMLElement.anchorElement as advised

f4cea25

Add spec urls for inset-area

1355c44

chrisdavidmills requested a review from Elchi3 April 19, 2024 14:00

Remove anchors-valid property as not supported initially

54e7dbd

Elchi3 approved these changes Apr 19, 2024

View reviewed changes

chrisdavidmills marked this pull request as ready for review April 21, 2024 21:07

Merge branch 'main' into css-anchor-positioning

cf09c94

chrisdavidmills merged commit de9fbb3 into mdn:main Apr 21, 2024
6 checks passed

chrisdavidmills deleted the css-anchor-positioning branch April 21, 2024 21:10

Elchi3 mentioned this pull request Apr 22, 2024

Tag CSS Anchor Positioning #22903

Merged

foolip mentioned this pull request Apr 22, 2024

Delete anchor HTML attribute #22910

Merged

Elchi3 mentioned this pull request Apr 23, 2024

Updates for Chrome 125 beta #22924

Merged

snyk-io bot mentioned this pull request May 21, 2024

[Snyk] Upgrade @mdn/browser-compat-data from 5.3.20 to 5.5.23 Hawthorne001/developer.chrome.com#4

Open

NOUIY mentioned this pull request May 26, 2024

[Snyk] Upgrade @mdn/browser-compat-data from 5.3.20 to 5.5.25 NOUIY/developer.chrome.com#245

Open

OKEAMAH mentioned this pull request May 26, 2024

[Snyk] Upgrade @mdn/browser-compat-data from 5.3.28 to 5.5.25 OKEAMAH/jetpack#9

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add BCD for CSS Anchor Positioning spec #22813

Add BCD for CSS Anchor Positioning spec #22813

chrisdavidmills commented Apr 9, 2024 •

edited

Loading

lukewarlow commented Apr 11, 2024 •

edited

Loading

chrisdavidmills commented Apr 11, 2024

mfreed7 commented Apr 11, 2024

github-actions bot commented Apr 17, 2024

Elchi3 Apr 18, 2024

lukewarlow Apr 18, 2024

chrisdavidmills Apr 19, 2024

Elchi3 Apr 19, 2024

mfreed7 Apr 19, 2024

chrisdavidmills Apr 19, 2024 •

edited

Loading

foolip Apr 22, 2024

chrisdavidmills Apr 22, 2024

mfreed7 Apr 22, 2024

mfreed7 Apr 22, 2024

Elchi3 left a comment

chrisdavidmills commented Apr 19, 2024

Elchi3 commented Apr 19, 2024

Elchi3 left a comment

chrisdavidmills commented Apr 21, 2024

Add BCD for CSS Anchor Positioning spec #22813

Add BCD for CSS Anchor Positioning spec #22813

Conversation

chrisdavidmills commented Apr 9, 2024 • edited Loading

Summary

Test results and supporting details

Related issues

lukewarlow commented Apr 11, 2024 • edited Loading

chrisdavidmills commented Apr 11, 2024

mfreed7 commented Apr 11, 2024

github-actions bot commented Apr 17, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

chrisdavidmills Apr 19, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Elchi3 left a comment

Choose a reason for hiding this comment

chrisdavidmills commented Apr 19, 2024

Elchi3 commented Apr 19, 2024

Elchi3 left a comment

Choose a reason for hiding this comment

chrisdavidmills commented Apr 21, 2024

chrisdavidmills commented Apr 9, 2024 •

edited

Loading

lukewarlow commented Apr 11, 2024 •

edited

Loading

chrisdavidmills Apr 19, 2024 •

edited

Loading