ウェブサイトで何かを開いたり閉じたりする操作は、どんなサイトにもあります。ハンバーガーメニューの開閉、問い合わせ前に表示するモーダル、よくある質問のアコーディオン、小さなツールチップ。こうした開閉パーツは長らくJavaScriptのライブラリで組むのが当たり前でした。ところが2026年に入り、ブラウザ標準の機能だけで同じことができる場面がぐっと増えています。
節目になったのが、2026年5月に公開されたSafari 26.5です。ここでopen擬似クラス(:open)が実装され、ChromeやFirefoxと足並みがそろいました。地味な追加に見えますが、標準機能だけで開閉UIを組む流れを後押しする一歩です。詳しくはWebKitの公式ブログでも解説されています。
open擬似クラスが開いた状態をまとめて扱う
:openは、要素が開いている状態にスタイルを当てるための擬似クラスです。対象はdetails要素やdialog要素、それにselect要素や、日付や色を選ぶinput要素のピッカーが開いたときまで含みます。開閉する部品を、種類を問わず同じ書き方で整えられるのが利点です。矢印の向きを変える、背景色を切り替えるといった見た目の調整を、状態ごとにCSSの中で完結させられます。
これまでは[open]属性セレクタで開閉状態を拾っていました。ただしこの書き方が効くのはdetails要素とdialog要素だけで、select要素やinput要素には使えませんでした。細かな差に見えますが、開閉するあらゆる要素を一貫した書き方で扱えるようになった意味は小さくありません。要素の種類ごとに別々のセレクタを覚える負担が減り、スタイルの見通しも良くなります。詳しい対応状況はMDNで確認できます。
標準タグだけで組める開閉パーツ
開閉UIの部品は、ここ数年でブラウザ側にそろってきました。モーダルはdialog要素のshowModalで開けます。背景を暗くする処理やフォーカスの閉じ込め、Escキーで閉じる動きまで、ブラウザがはじめから面倒をみてくれます。ちょっとしたメニューや吹き出しは、HTMLにpopover属性を足すだけで開閉できます。Popover APIは2025年4月に主要ブラウザで安定して使えるようになり、いまでは前提として組み込める土台になりました。popover属性を付けた要素は、外側をクリックしたりEscキーを押したりすると自動的に閉じます。いわゆるライトディスミスの挙動を、自分で書かなくてもブラウザが用意してくれます。
よくある質問のアコーディオンは、details要素とsummary要素だけで作れます。開いたときの見た目は:openで整えれば、開閉の状態管理をJavaScriptで書く必要はありません。ポップオーバーが表示中かどうかは:popover-openでも拾えます。Safari 26.5では、どの要素がポップオーバーを開いたかを知るための仕組みも加わり、複数の開閉部品が絡む画面でも扱いやすくなりました。ボタンを押すと候補が開くドロップダウンのような部品も、こうした標準機能の組み合わせで素直に表現できます。素朴なHTMLの積み重ねで、これまで外部ライブラリに任せていた動きの多くがまかなえます。
制作現場にとっての意味
標準機能に寄せる利点は、まずコードが軽くなることです。開閉のためだけに読み込んでいた外部ライブラリを減らせば、ページの表示は速くなり、保守の手間も下がります。加えて見落としがちなのがアクセシビリティです。dialog要素やpopover属性は、キーボード操作やスクリーンリーダーへの対応がはじめから組み込まれています。自前で作った開閉UIにありがちな、フォーカスが迷子になる、Escキーで閉じないといった不具合を避けやすくなります。ブラウザ標準の挙動に乗るぶん、環境による見え方や操作感のばらつきも抑えやすくなります。
中小企業のサイトでも、問い合わせ導線のモーダルやFAQのアコーディオンなど、使いどころは多いはずです。たとえば、以前はプラグイン頼みで組んでいたFAQの開閉を、details要素と:openだけに置き換えれば、依存が減って動作も安定します。ただし現状では、古いブラウザ向けのフォールバックや、凝ったアニメーションでのCSSとの併用など、細かい調整が要る場面は残ります。それでも、開閉UIの土台をブラウザ任せにできる範囲は着実に広がっています。新しく組むときは、まず標準機能だけで足りるかを出発点に考える価値が出てきました。手が込んだ実装に進むのは、それで届かないところを見極めてからでも遅くありません。