もうJSは不要？HTML/CSSだけで実装できるモダンなWeb技術4選

こんにちは。デザイン戦略部のオオイです。

モーダルウィンドウ、アコーディオン、スクロール連動アニメーション...。これまで、これらのUI実装にはJavaScriptが必須でした。しかしHTMLとCSSの進化により、もう頑張ってJSを書く必要はなくなってきているかもしれません。

今回は、そんな JavaScriptを使わずにHTMLとCSSだけで実装できるようになったモダンなWeb技術を4つご紹介します。
これらの技術は、コードをシンプルにするだけでなく、サイトの「パフォーマンス向上」や「アクセシビリティの担保」といった重要なメリットにも繋がります。

1.popover属性でモーダルを簡単に実装

HTMLのpopover属性を使うことで、モーダルダイアログの実装が非常に簡単になりました。

実装方法

モーダル本体となる要素にidとpopover属性を記述します。ここでは<dialog>要素を使用しています。

ボタン要素にpopovertarget属性を記述し、モーダル本体のidを指定します。

<button popovertarget="modal">モーダルを開く</button>
<dialog id="modal" popover>
  <p>モーダルの中身。</p>
  <button
    popovertarget="modal"
    popovertargetaction="hide"
  >
    閉じる
  </button>
</dialog>

popoverAPIを使ったデモコンテンツのデモ

popover属性の値と動作の違い

popover属性には、動作を制御するための"auto"と"manual"が指定可能です。

属性値	他のpopoverの動作	要素外クリック（ライトディスミス）
"auto" (デフォルト/値なし)	他のpopoverを閉じます。	自動で閉じます。
"manual"	他のpopoverを閉じません。	閉じません。

"auto"がデフォルトになっており、開くときに他のpopoverを閉じます。また、popover以外の要素をクリックすると自動で閉じます。
"manual"は他のpopoverを閉じず、要素外をクリックしても閉じません。

スタイル設定のための疑似要素/疑似クラス

疑似要素`::backdrop`

モーダル表示中は疑似要素::backdropが配置されます。これはモーダルの背後に配置される全画面要素で、CSSでスタイルの変更が可能です。

疑似クラス`:popover-open`

表示中のモーダルには疑似クラス:popover-openが付与されます。::backdrop要素と同様にCSSで指定が可能です。#modal:popover-openといった指定をすることで、表示中のスタイルを変更することができます。モーダルそのもののスタイルよりは、モーダル表示時のアニメーションやモーダル表示中の他の要素のスタイル適用に使用することが多いです。

2. :user-invalid疑似クラスでフォームエラー表示を改善

疑似クラス:user-invalidで、エラー時の見た目をCSSだけで実装できるようになりました。

従来の`:invalid`の課題

従来の疑似クラス:invalidでは、inputにrequired属性が付与されていると、ページを開いた瞬間に適用されていました。これではエラー時のスタイルがページを表示した瞬間に適用されてしまうので、ユーザー体験を良いものにはできません。

`:user-invalid`の利点

:user-invalidでは:invalidの欠点が解消され、ユーザーの入力動作の後に付与されるようになりました。これにより、ユーザーが何も入力していない状態でエラー表示が出るのを防ぎ、ユーザー体験を向上させることができます。

実装例

type, required, minlength, maxlength, patternなどのHTML属性と組み合わせることで、簡単なバリデーションとエラー表示をHTML/CSSだけで実装することも可能です。

input:user-invalid {
  border-color: red;
  background: #fff0f0;
}

user-invalidを使ったフォームのデモ

3. <details>, <summary>でアコーディオンUIを簡単に

<details>要素と<summary>要素を使用することで、アコーディオン型のUIを簡単に作成することができます。

実装方法

<details>
  <summary>概要</summary>
  コンテンツ詳細。
  通常時は折りたたまれています。
</details>

details要素とsummary要素を使ったアコーディオンUIの動作デモ

従来だとアコーディオンを作る際、<input type="checkbox">を使用したり、JSでクリックイベントを検知するようにしたりと、コードが複雑になりがちでした。しかし、<details>要素<summary>要素を使用することで、必要最低限の開閉動作を備えたアコーディオンを簡単に作成できます。

ユーザビリティの利点

実装が簡単になるだけではなく、ユーザビリティの向上にもつなげることができます。

キーボード操作: <details>要素はtabキーでのフォーカスが可能で、space/enterキーでの開閉が行えます。
サイト内検索: サイト内検索で単語がヒットすると自動でアコーディオン部分が開かれます。

4. Scroll-driven Animationsでスクロールと連動したアニメーション

スクロールと連動したアニメーションがCSSだけで実装できます。

実装方法

従来はJSを使用してスクロールを検知したり、スクロール量と連動させてアニメーションが実行されていました。

CSSのanimation-timelineを使用することで、CSSのみでスクロール量と連動させたアニメーションを実装できるようになりました。

従来通りCSSアニメーション（@keyframes）を作成した後に、animation-timeline: scroll();を記述することで、アニメーションの進行とスクロール位置が連動します。

@keyframes progress-bar {
  from {
    width: 0vw;
  }
  to {
    width: 100vw;
  }
}

.element {
  position: fixed;
  top: 0;
  left: 0;
  width: 0vw;
  padding: 5px;
  background-color: #4CAF50;
  animation: progress-bar 1s forwards;
  animation-timeline: scroll();
}

scroll-drivenを使用したアニメーションのデモ