HTML anchor attribute

[josepharhar]

Request for Mozilla Position on an Emerging Web Specification

• Specification Title: HTML anchor attribute
• Specification or proposal URL (if available): Add anchor attribute whatwg/html#9144
• Explainer URL (if available):
• Caniuse.com URL (optional):
• Bugzilla URL (optional):
• Mozillians who can provide input (optional):

Other information

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>

[emilio]

I'm a bit confused about this... I guess the idea would be that anchor would be looked up after trying an anchor name if it's not found... But have we considered adding a way of using an element id in anchor-default? Then it can be a regular mapped attribute, instead of a new magic thing?

[josepharhar]

I'm a bit confused about this... I guess the idea would be that anchor would be looked up after trying an anchor name if it's not found... But have we considered adding a way of using an element id in anchor-default? Then it can be a regular mapped attribute, instead of a new magic thing?

As far as I know, there aren't any other CSS properties which refer to elements by ID, except mask and clip-path which can refer to them with the url syntax which we wouldn't want for this. Would this be easy to do in a way which allows you to refer to either element IDs or anchor-name values?

Using an HTML attribute also has the benefits of assigning to element.anchorElement imperatively without an ID and that setting up relationships between elements seems like something that HTML attributes are already well suited for.

[emilio]

I commented on the spec PR. This still feels a bit of a smell to me but I understand it enables useful things. I think at least we should have a name for this that reflects what it really is (an implicit / fallback thing compared to CSS's anchor-name), to avoid author confusion... But I wonder if @jwatt has different opinions here.

[mfreed7]

Just saw this comment, sorry. To avoid having the conversation two places, let’s chat on the spec PR.