Support for position-area

[jamesnw]

Description

Provides support for position-area.

Related Issue(s)

#181

Steps to test/reproduce

This is in a state where much of the functionality is working. Known issues, some of which may not be supported in the initial release:

• Shifting content to stay inside its containing block - Example
• span-all not centered - Example
• Respecting the cascade with multiple selectors - Example
• Percentage lengths for margin, etc, adjusted to match new containing block
• position-areas as fallback options
• Writing direction support

A large caveat is that the positioned element's containing block is generated by creating a div wrapper for the positioned element. This means that selectors relying on direct child selectors or sibling selectors will not work.

Show me

https://deploy-preview-296--anchor-polyfill.netlify.app/position-area.html

[netlify]

✅ Deploy Preview for anchor-polyfill ready!

Name	Link
🔨 Latest commit	706b640
🔍 Latest deploy log	https://app.netlify.com/sites/anchor-polyfill/deploys/67c5e49c08b452000876b4d8
😎 Deploy Preview	https://deploy-preview-296--anchor-polyfill.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[netlify]

✅ Deploy Preview for anchor-position-wpt canceled.

Name	Link
🔨 Latest commit	706b640
🔍 Latest deploy log	https://app.netlify.com/sites/anchor-position-wpt/deploys/67c5e49cf8e7c100089f7c7b

[jamesnw]

@mirisuzanne My initial attempt at positioning the positioned element for a given position-area was to closely emulate the spec- setting the inset to the containing block specified by the grid area, and then using justify-self and align-self to place the element within that containing block.

However, there is insufficient support for justify-self and align-self on absolute positioned elements- none in Safari, only 2 months in Firefox, and only a year in Chrome. Is there another way we could do it?

My current best idea is to create a grid element that is positioned absolutely in the space the new containing block would take up, insert it as the parent to the positioned element, and then we could use justify-self and align-self. The major downside I see is that any CSS rules relying on direct child or sibling selectors would fail. Is there a better way to polyfill this?

[mirisuzanne]

@jamesnw

My current best idea is to create a grid element that is positioned absolutely in the space the new containing block would take up, insert it as the parent to the positioned element, and then we could use justify-self and align-self. The major downside I see is that any CSS rules relying on direct child or sibling selectors would fail.

That was my thought process exactly.

I suppose the brute force solution would be creating a sibling positioned grid with an aligned child, and then using the offset from that to re-position the actual element? That could still theoretically cause selector issues, but probably more rare.

I don't know. At a certain point we have to say "it's a polyfill, not a perfect implementation"

[jamesnw]

I've pushed an implementation that wraps it in place, and it's working well at https://deploy-preview-296--anchor-polyfill.netlify.app/position-area.html. You can click the unstyled "Toggle Wrapper Visibility" button at the top to see the wrapper. There are still a few issues to work out.