#1 superfan of the CSS Anchor Positioning API: https://developer.chrome.com/blog/anchor-positioning-api
-
#1 superfan of the CSS Anchor Positioning API: https://developer.chrome.com/blog/anchor-positioning-api
Used it to implement more accessible heading anchor links on `eleventy-base-blog` using sibling elements without a wrapper element
You can see it in action here: https://eleventy-base-blog-git-v9-11ty.vercel.app/blog/thirdpost/ (Chrome and Edge support this, falls back to a nested link in other browsers)
-
Zach Leatherman :11ty:replied to Zach Leatherman :11ty: last edited by
cc @DavidDarnes and @ambrwlsn who might be interested in this! https://github.com/11ty/eleventy-base-blog/blob/dc5ab2ef6372de744be5484ada4958a4342073ea/public/js/heading-anchors.js
-
Rijk 🐰 ✨replied to Zach Leatherman :11ty: last edited by
@zachleat Apparently it's so new it makes the DevTools crash (In Arc, which is Chromium based)
-
Zach Leatherman :11ty:replied to Rijk 🐰 ✨ last edited by [email protected]
@rijk yeah! crashes every time I inspect in Chrome Dev Tools too
cc @paul_irish
-
Ricky de Laveagareplied to Zach Leatherman :11ty: last edited by
@zachleat @rijk @paul_irish also only *works* in Chrome correct? Is Safari or Firefox support even on the horizon? Does @eleventy care about non-Chromium browsers?
-
Ricky de Laveagareplied to Ricky de Laveaga last edited by
@zachleat @rijk @paul_irish @eleventy seems like a wrapper element that works in all browsers is vastly preferable.
-
Zach Leatherman :11ty:replied to Ricky de Laveaga last edited by
@rdela @rijk @paul_irish @eleventy I suppose it’s my fault for not communicating the amount of nuance in play here. Make sure you test in Firefox/Safari to see the fallback behavior!
-
@rdela only works in Chrome *at the moment* as they're the first ones to ship it. It's a w3 spec just like any other so it'll come to other browser soon enough. The way @zachleat implemented it means it's a progressive enhancement for browser that have it already, but it won't break or lock things down for other browser that don’t.
-
Zach Leatherman :11ty:replied to Rijk 🐰 ✨ last edited by
-
Amberreplied to Zach Leatherman :11ty: last edited by
@zachleat @DavidDarnes well then I may have to update my site
-
Ricky de Laveagareplied to Zach Leatherman :11ty: last edited by
@zachleat @rijk @paul_irish @eleventy I did test, see other response. Also I tried to have a conversation about this here https://mastodon.social/@rdela/112974024986394224
…on GH https://github.com/rdela/eleventeen/pull/44
…and emailed you about it as well, Zach, to no avail. I get that the wrapper element isn’t your preferred choice here, but when even devtools is crashing, it became almost comical to me, so I thought I would chime in here as well.
-
Zach Leatherman :11ty:replied to Ricky de Laveaga last edited by [email protected]
@rdela @rijk @paul_irish @eleventy Not sure why this feels like a heated discussion—I am back from vacation and haven’t quite caught up on all my emails yet?
Unfortunately I don’t think the container element *is* preferable—it has markup and styling complexities that I’m trying to avoid (if possible!).