 #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) 16 comments
@zachleat @DavidDarnes @ambrwlsn Lovely! As someone who has used Amber's version with the wrapping, the thought of being able to avoid that is excellent. @rijk yeah! crashes every time I inspect in Chrome Dev Tools too 😬 cc @paul_irish  @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? @zachleat @rijk @paul_irish @eleventy seems like a wrapper element that works in all browsers is vastly preferable. @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! @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. @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!). @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. 🙂 @rdela @zachleat While valid concerns overall, those aren't a result of using anchor positioning which kicked this thread off. You can see the same behavior in the previous iteration that didn't use the newly released CSS property https://eleventy-base-blog.netlify.app/blog/thirdpost/ |
Gregory's Server
cc @DavidDarnes and @ambrwlsn who might be interested in this! https://github.com/11ty/eleventy-base-blog/blob/dc5ab2ef6372de744be5484ada4958a4342073ea/public/js/heading-anchors.js