HTML anchor attribute

[josepharhar]

WebKittens

No response

Title of the spec

HTML anchor attribute

URL to the spec

whatwg/html#9144

URL to the spec's repository

https://github.com/whatwg/html

Issue Tracker URL

No response

Explainer URL

No response

TAG Design Review URL

w3ctag/design-reviews#848

Mozilla standards-positions issue URL

mozilla/standards-positions#836

WebKit Bugzilla URL

No response

Radar URL

No response

Description

The anchor attribute allows HTML to hook into CSS Anchor positioning to set an implicit anchor element: https://drafts.csswg.org/css-anchor-position-1/#implicit-anchor-element

By using the anchor attribute, you don't have to use the anchor-name and anchor-default CSS properties to set up an anchor positioning relationship.

Here is an example without the anchor attribute:

<div id=myanchor>anchor</div>
<div id=positioned>anchor positioned</div>
<style>
div {
  position: absolute;
  width: 100px;
  border: 1px solid black;
}
#anchor {
  top: 50px;
  left: 50px;

  /* needed without the HTML anchor attribute */
  anchor-name: --my-anchor;
}
#positioned {
  top: anchor(bottom);
  left: anchor(left);

  /* needed without the HTML anchor attribute */
  anchor-default: --my-anchor;
}
</style>

And here is an example of the same thing with the anchor attribute which gets rid of anchor-name and anchor-default:

<div id=myanchor>anchor</div>
<div id=positioned anchor=myanchor>anchor positioned</div>
<style>
div {
  position: absolute;
  width: 100px;
  border: 1px solid black;
}
#myanchor {
  top: 50px;
  left: 50px;
}
#positioned {
  top: anchor(bottom);
  left: anchor(left);
}
</style>

[lukewarlow]

#167 here's the position issue on the CSS spec side of this. Just so if one gets a position the other gets one at the same time (or at least is considered)

[mfreed7]

Any feedback on this standards position request?

[annevk]

Looking at this again we're not quite sure what the semantics of the anchor attribute are? It seems to be entirely presentational.

It makes sense to us that popovers would influence the implicit anchor element, but popovers also create accessibility mappings and do a number of other things. This very much seems presentational, which we've shielded HTML from for the past two decades.