Firefox for Web Developers @webdevs.firefox.com · Jun 2

Ever struggled to get heading tags right in includes/components? headingoffset could be the answer…

249 likes 10 replies

?

Replies

Martin Kopeček · Jun 2

Nice! Remember implementing this in my custom PHP framework (because who didn't have one) in something like 2005 :)

Mike Jeffery · Jun 2

I can't wait to start using this... Do I have to? 🤣

J0&. · Jun 3

this is so cool! -josie

charli xkcd · Jun 2

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 · Jun 2

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 😊

Aleksey Nazarenko · Jun 3

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>

Anthony Frehner · Jun 2

A @keithamus.social masterpiece

Vincent · Jun 2

Hard to believe it’s actually going to get fixed after over 30 years.

DLH · Jun 3

This is going to be a great feature!

elliot · Jun 2

this is so cool! i hope other browsers get this soon too