JavaScriptなしでHTMLだけでできること
मूल शीर्षक: HTML Can Do That
यह क्यों महत्वपूर्ण है
HTMLの標準機能拡張がJavaScriptへの依存を減らし、Web開発の軽量化とアクセシビリティ向上に直結するため注目される。
Chris Burnellは2026年8月20日、HTML Day 2026に合わせて公開したページを更新し、JavaScriptを使わずにHTMLのみで実現できる動的機能をまとめた。popover、dialog、details、commandforなどの属性・要素が対象。
Chris Burnellが公開した「HTML Can Do That」ページは、かつてJavaScriptが担っていた動的機能をHTMLのみで実現できることを紹介する技術解説ページです。
主な機能として以下が紹介されています。
**popover属性**: `popover`と`popovertarget`属性を使うだけで、ライトディスミス（外クリックで閉じる）やEscキーでの閉じる動作、z-indexの管理不要なポップオーバーが実現できます。
**`<dialog>`要素**: モーダルダイアログ専用の要素で、`popover`属性との組み合わせや`<form method="dialog">`によってJavaScriptなしで開閉が可能です。ただし、JavaScriptによる`.showModal()`や`.close()`メソッドの利用例も補足として掲載されています。
**グループ化された`<details>`**: `name`属性を複数の`<details>`要素で共有することで、排他的なアコーディオンを実現。1つを開くと他が自動的に閉じます。
**`command`と`commandfor`属性**: 別々のボタンで1つのpopoverを制御できるInvoker Commandsの仕組みで、`show-modal`、`close`、`toggle-popover`などがブラウザの安定版に対応済みです。
Burnellは更新の際、「ブラウザの実装が不十分な部分やアクセシビリティ要件を満たしていない部分も率直に示すよう編集した」と述べており、利用に際してはアクセシビリティの確保を強く推奨しています。