Skip to content

Support for position-area #296

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 47 commits into from
Apr 8, 2025
Merged

Support for position-area #296

merged 47 commits into from
Apr 8, 2025

Conversation

jamesnw
Copy link
Contributor

@jamesnw jamesnw commented Feb 17, 2025

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, which are expected to not be part of an initial release-

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

A large caveat is that the positioned element's containing block is generated by creating a grid wrapper element 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

TODO

  • Update README

Copy link

netlify bot commented Feb 17, 2025

Deploy Preview for anchor-polyfill ready!

Name Link
🔨 Latest commit 7be4f97
🔍 Latest deploy log https://app.netlify.com/sites/anchor-polyfill/deploys/67f540a3f423c800077730c5
😎 Deploy Preview https://deploy-preview-296--anchor-polyfill.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

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

Copy link

netlify bot commented Feb 17, 2025

Deploy Preview for anchor-position-wpt canceled.

Name Link
🔨 Latest commit 7be4f97
🔍 Latest deploy log https://app.netlify.com/sites/anchor-position-wpt/deploys/67f540a3c81f990008824d59

@jamesnw jamesnw requested a review from jgerigmeyer February 17, 2025 16:57
@jamesnw
Copy link
Contributor Author

jamesnw commented Feb 27, 2025

@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
Copy link
Member

mirisuzanne commented Feb 27, 2025

@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
Copy link
Contributor Author

jamesnw commented Feb 28, 2025

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.

Copy link
Member

@jgerigmeyer jgerigmeyer left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@jamesnw This is a great start! I definitely can't say I reviewed every LOC, but did come up with some initial questions. Up to you if it'd be more efficient to talk through these on a call? There's a lot going on in this polyfill, and I get confused quickly 😅

@jamesnw jamesnw linked an issue Mar 25, 2025 that may be closed by this pull request
@jamesnw jamesnw requested a review from jgerigmeyer March 31, 2025 19:32
@jamesnw jamesnw marked this pull request as ready for review March 31, 2025 19:33
@schalkneethling
Copy link

:has is the limiting factor, and would move the browser support to:

* Chromium 105

* Firefox 121

* Safari 15.4

While the previous support matrix is commendable and mind-blowing (how do you even 😁), I wonder whether the support here is more than good enough, especially if it keeps the code more maintainable and "simpler". What do you all think?

@jamesnw
Copy link
Contributor Author

jamesnw commented Apr 1, 2025

(how do you even 😁)

We have been able to largely avoid newer syntax, but much of the early support is theoretical 😀.

I wonder whether the support here is more than good enough, especially if it keeps the code more maintainable and "simpler". What do you all think?

I think we have a few options.

  1. Use the newer method, and move the support window (with the clarification it's only for position-area)
  2. Use the older method
  3. Support both

I've opened #307 to explore what it would look like to implement this.

Copy link
Member

@jgerigmeyer jgerigmeyer left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🚀

@jamesnw jamesnw mentioned this pull request Apr 7, 2025
@jamesnw jamesnw requested a review from jgerigmeyer April 7, 2025 20:15
Copy link
Member

@jgerigmeyer jgerigmeyer left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good! 🎉

@jamesnw
Copy link
Contributor Author

jamesnw commented Apr 8, 2025

In updating the docs, I discovered that our wrapping element also fixes the margin percentage difference.

@jamesnw jamesnw merged commit 8f3d9bb into main Apr 8, 2025
14 checks passed
@jamesnw jamesnw deleted the position-area branch April 8, 2025 15:38
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Positioning with position-area
4 participants