-
-
Notifications
You must be signed in to change notification settings - Fork 13
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
Conversation
✅ Deploy Preview for anchor-polyfill ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
✅ Deploy Preview for anchor-position-wpt canceled.
|
ntaining blocks
@mirisuzanne My initial attempt at positioning the positioned element for a given However, there is insufficient support for 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 |
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" |
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. |
* main: Lint Add Previewing Pull Requests section Typo Add content type Add built polyfill to Netlify build
There was a problem hiding this 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 😅
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? |
We have been able to largely avoid newer syntax, but much of the early support is theoretical 😀.
I think we have a few options.
I've opened #307 to explore what it would look like to implement this. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
🚀
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Looks good! 🎉
In updating the docs, I discovered that our wrapping element also fixes the margin percentage difference. |
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-
span-all
not centered - Exampleposition-area
s as fallback optionsA 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