Post

Ky
@ky.fyi

I’ve wanted this forever omg What happens when you use tags other than <h1>? Those also get bumped by the offset amount?

Jakob E
@jakob-e.bsky.social

Am I correct in assuming <div> <h1></h1> <h2></h2> <h3></h3> <div headingoffset=“1”> 👉🏻<h1>This will be H2 not H4</h1> <h2> H3 not H5 </h2> <h3> H4 not H6 </h3> </div> </div> To get the second you would need headingoffset=“3” Also this makes the :heading() selector make sense 😊

Jakob E
@jakob-e.bsky.social

Side question (extremely very rare use case) but could this potentially be used for out of range headings (yes I’ve needed a <h7> in the past - thread sealing for engineers can be very specific 😅) I used aria-level=“7” though I don’t think it would actually validate anywhere Likely not but 🤞🏻

Keith Cirkel
@keithamus.social

Yes headingoffset can push headings up to level 9 (clamped), so `<div headingoffset=9001><h6>I'm level 9!</h6></div>`. Why 9? Because aria-level also goes up to 9.

Aleksey Nazarenko
@alexnozer.bsky.social

So, how does this work with aria-level and custom headings? <h1>lvl 1</h1> <section headingoffset="1"> <h1 aria-level="3"> lvl 3 or lvl 2? </h1> <my-heading role="heading"> lvl 2? </my-heading> <my-heading role="heading" aria-level="3"> lvl 3 or lvl 2? </my-heading> </section>