heading-anchors Web Component

<heading-anchors> adds sibling anchor links for heading elements (h1, h2, h3, h4, h5, h6) when they have an id attribute and positions those anchor links visually as though they were nested inside of the heading.

Demo
Source code on GitHub

Insp…


This content originally appeared on Zach Leatherman and was authored by Zach Leatherman

<heading-anchors> adds sibling anchor links for heading elements (h1, h2, h3, h4, h5, h6) when they have an id attribute and positions those anchor links visually as though they were nested inside of the heading.

Inspired by David Darnes’ component of the same name.

Currently in use on v9 of the eleventy-base-blog project (and on this very web site, too).

Features

  • Useful when you want preserve heading text as is (selectable, able to nest other links, etc).
  • Useful when you want to exclude anchor links from your RSS feed.
  • Links are positioned alongside heading text, but not nested inside of heading markup (for improved screen-reader compatibility and accessibility)
  • Establishes a placeholder element to establish space for the anchor link and so that heading text doesn’t reflow during interaction
  • Prefers the CSS Anchoring API (where available) but works using JavaScript positioning when the API is not available.
  • Automatically matches font styling of the heading (font-family, line-height, font-size, and font-weight)

Prior Art


This content originally appeared on Zach Leatherman and was authored by Zach Leatherman


Print Share Comment Cite Upload Translate Updates
APA

Zach Leatherman | Sciencx (2024-08-29T00:00:00+00:00) heading-anchors Web Component. Retrieved from https://www.scien.cx/2024/08/29/heading-anchors-web-component/

MLA
" » heading-anchors Web Component." Zach Leatherman | Sciencx - Thursday August 29, 2024, https://www.scien.cx/2024/08/29/heading-anchors-web-component/
HARVARD
Zach Leatherman | Sciencx Thursday August 29, 2024 » heading-anchors Web Component., viewed ,<https://www.scien.cx/2024/08/29/heading-anchors-web-component/>
VANCOUVER
Zach Leatherman | Sciencx - » heading-anchors Web Component. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2024/08/29/heading-anchors-web-component/
CHICAGO
" » heading-anchors Web Component." Zach Leatherman | Sciencx - Accessed . https://www.scien.cx/2024/08/29/heading-anchors-web-component/
IEEE
" » heading-anchors Web Component." Zach Leatherman | Sciencx [Online]. Available: https://www.scien.cx/2024/08/29/heading-anchors-web-component/. [Accessed: ]
rf:citation
» heading-anchors Web Component | Zach Leatherman | Sciencx | https://www.scien.cx/2024/08/29/heading-anchors-web-component/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts