‏کارایی که HTML الان بدون جاوااسکریپت انجام می‌ده

کریس برنل این صفحه رو تو یه ساعت و برای HTML Day 2026 ساخته تا نشون بده HTML چقدر از کارهایی که قبلاً قلمرو جاوااسکریپت بود رو حالا خودش انجام می‌ده. به گفتهٔ خودش بعد از انتشار اولیه یه سری ویرایش هم اضافه کرده تا جاهایی که پیاده‌سازی مرورگرها ضعیفه یا اصلاً نیازهای دسترسی‌پذیری رو برآورده نمی‌کنه بهتر مشخص بشه؛ توصیه‌ش اینه که هر کدوم رو استفاده می‌کنین، تا جای ممکن قابل‌دسترس نگهش دارین.

ستاره‌ی این فهرست اتریبیوت popoverه که با popovertarget جفت می‌شه: بستن با کلید Esc، بستن با کلیک بیرون از عنصر (light dismiss) و نشستن روی بالاترین لایه بدون دستکاری z-index، همه بدون یه خط جاوااسکریپت. همین اتریبیوت وقتی روی تگ بشینه، باکس مودال رو هم با همون سازوکار باز و بسته می‌کنه.

<button popovertarget="example-popover">Toggle popover</button>
<div id="example-popover" popover>
	<p>No JavaScript, just modern browser magic!</p>
	<button popovertarget="example-popover" popovertargetaction="hide">Close</button>
</div>

تازه‌ترین موردی که به مرورگرها رسیده command و commandforه که باهاش می‌شه چند تا دکمه‌ی جدا رو به یه پاپ‌آور یا دیالوگ وصل کرد. فعلاً فقط show-modal، close، request-close، toggle-popover، show-popover و hide-popover پایدار شدن، ولی نویسنده می‌گه بعداً دستورای بیشتری مثل کم و زیاد کردن مقدارها، کار با عناصر مدیا و کپی کردن متن هم اضافه می‌شه.

چند مورد دیگه هم هست: وقتی چند تا یه name مشترک بگیرن، تبدیل می‌شن به یه آکاردئون انحصاری که با باز کردن یکی، بقیه خودکار بسته می‌شن. loading="lazy" بارگذاری عکس رو تا نزدیک شدن به viewport عقب می‌ندازه، بدون این‌که خبری از IntersectionObserver باشه. و hidden="until-found" یه بخش مخفی رو با رفتن به لینک فرگمنتش خودکار باز می‌کنه، هرچند نویسنده می‌گه این یکی فعلاً فقط با جستجوی خود مرورگر جور درمیاد و با جستجوی صفحه‌خوان‌ها نه.

بخش آخر همون‌جاییه که نویسنده صریح‌تر هشدار می‌ده: ورودی‌های رنگ، تاریخ و بازه و همچنین و مستقیم تو مرورگر پیاده‌سازی شدن، ولی به نظر اون یه‌کم نیمه‌کاره‌ان، استایل پیش‌فرضشون بین مرورگرها خیلی فرق می‌کنه و تجربه‌ی دسترسی‌پذیریشون ضعیفه. دربارهٔ هم که پیشنهاد خودکار بدون کتابخونه می‌ده، با ارجاع به نوشته‌ی آدریان روزلی می‌گه پشتیبانی و پیاده‌سازیش هنوز پر ایراده و شاید بهتر باشه فعلاً کنار بذارینش.

نکات کلیدی:

• popover + popovertarget بستن با Esc و light dismiss رو بدون جاوااسکریپت و z-index می‌ده
• همون popover روی هم کار می‌کنه و مودال رو باز و بسته می‌کنه
• از command/commandfor فعلاً فقط ۶ دستور پایدار شده، از show-modal تا hide-popover
• name مشترک روی چند یه آکاردئون انحصاری می‌سازه
• loading="lazy" جایگزین IntersectionObserver برای بارگذاری تنبل عکسه
• hidden="until-found"، ورودی‌های رنگ/تاریخ/بازه و دسترسی‌پذیری ضعیفی دارن