‏ویژگی headingoffset: سطح هدینگ‌ها رو بدون عوض کردن تگ تغییر بده

نویسندهٔ این مقاله سراغ یه attribute جدید HTML به اسم headingoffset رفته. مشکلی که حل می‌کنه آشناست: یه کامپوننت می‌سازی که توش h1 داره، بعد جایی استفاده‌ش می‌کنی که باید h2 باشه. معمولاً این کارو با props حل می‌کنیم، ولی headingoffset یه راه دیگه‌ست. وقتی به کل HTML دسترسی نداری و ترتیب هدینگ‌ها به هم ریخته هم می‌تونه کمک کنه. Firefox Nightly 153 این قابلیت رو پشت فلگ dom.headingoffset.enabled منتشر کرده، پس تا پشتیبانی همهٔ مرورگرها راه زیادی مونده.

قانونش ساده‌ست: مقدار headingoffset به سطح هدینگ اضافه می‌شه. این مقدار به فرزندها هم می‌رسه و اگه چند تا container تودرتو هر کدوم headingoffset داشته باشن، همه با هم جمع می‌شن. حتی خود هدینگ هم می‌تونه یکی داشته باشه:

<div headingoffset="2">
  <div headingoffset="3">
    <h1>2 + 3 + 1 = Heading 6</h1>
    <h2>2 + 3 + 2 = Heading 7</h2>
    <h3 headingoffset="1">2 + 3 + 3 + 1 = Heading 9</h3>
  </div>
</div>

آره، هدینگ ۷ و ۹! مقدار headingoffset یه عدد صحیح بین ۰ تا ۸ هست و سطح نهایی حداکثر به ۹ می‌رسه. پس h6 با offset برابر ۸ هدینگ ۱۴ نمی‌شه و همون ۹ می‌مونه. نویسنده پیشنهاد می‌کنه نتیجه رو با بخش accessibility تو DevTools چک کنی.

چون تگ عوض نمی‌شه، سلکتور h3 تو CSS دیگه هدینگی که از h1 به سطح ۳ رسیده رو نمی‌گیره. برای استایل‌دهی باید از pseudo-class تابعی :heading() استفاده کنی (یعنی سلکتوری که هدینگ‌ها رو بر اساس سطح محاسبه‌شده‌شون انتخاب می‌کنه، نه اسم تگ). مثلاً :heading(3) همون هدینگ رو می‌گیره.

attribute دوم، headingreset، اثر offsetهای بیرونی رو قطع می‌کنه و سطح دوباره از روی خود تگ تعیین می‌شه. جای مناسبش مثلاً aside یا dialog مودال هست که جزو جریان اصلی سند نیستن. اگه یه المنت هر دو رو داشته باشه، offsetهای بیرونی حذف می‌شن ولی offset خودش اعمال می‌شه. aria-level هم از همه قوی‌تره و مستقیم سطح رو تعیین می‌کنه. فرقشون اینه که offsetها جمع‌شونده‌ان ولی aria-level قطعیه.

نویسنده توصیه می‌کنه کم ازش استفاده کنی. offsetهای زیاد، پخش‌شده تو فایل‌های مختلف یا خیلی دور از هدینگ‌ها، دنبال کردن ساختار صفحه رو سخت می‌کنن و کامنت HTML اینجا کمک می‌کنه. یه ایدهٔ جالبش هم اینه که با تودرتو کردن divهایی با headingoffset="1" می‌شه همون document outline algorithm رو شبیه‌سازی کرد، یعنی الگوریتمی که قرار بود سطح هدینگ رو از عمق section تعیین کنه ولی هیچ‌وقت پیاده نشد.

نکات کلیدی:

• headingoffset یه عدد صحیح بین ۰ تا ۸ می‌گیره و به سطح هدینگ اضافه می‌کنه
• offsetهای تودرتو جمع می‌شن و سطح نهایی حداکثر ۹ هست
• فعلاً فقط Firefox Nightly 153 پشت فلگ dom.headingoffset.enabled پشتیبانی می‌کنه
• برای استایل‌دهی باید به جای h1 تا h6 از :heading() استفاده کرد
• headingreset اثر offsetهای بیرونی رو قطع می‌کنه، مناسب dialog و aside
• aria-level بر همهٔ offsetها اولویت داره و اونم حداکثر تا ۹ می‌ره