A technical walkthrough about replacing runtime JavaScript to create heading anchors.

Kitty Giraudel is a frontend developer and CSS enthusiast known for her expertise in web design and front-end development. Readers can learn about CSS techniques, web typography, and responsive design. With articles, tutorials, and demos, Kitty Giraudel shares  insights and techniques for creating beautiful and accessible web experiences.

Kitty says hi.

A walkthrough of replacing a runtime JavaScript web component (heading-anchors) with a build-time Eleventy transform that injects heading anchor links using cheerio. The post covers the transform implementation, CSS styling using the modern CSS Anchor Positioning API, and a fallback for browsers that don't support it yet. The result removes a JavaScript dependency while keeping the same UX, with a CSS-only fallback for older browsers.

Heading Anchors with Eleventy