2022年にWebブラウザに実装された気になる機能を実装例とともに紹介

気付けば、もう年末ということで、2022 年に主要な Web ブラウザで実装された機能から個人的に気になったものをいくつか紹介します。

本記事は、11 月 26 日に行われた JSConf.jp のサイボウズのセッションの中で紹介した内容の詳細版になります。このセッションでは、フロントエンドエキスパートチームのメンバーが 2022 年の印象に残ったフロントエンドトピックについて話していますので、興味のある方は是非ご覧ください！

https://www.youtube.com/live/ccysINf4qTE

(4:51:50 あたりから始まります)

主要ブラウザ全てで実装された機能

ダイアログ要素 <dialog>

Chrome	Edge	Firefox	Safari
37	79	98	15.4

3 月にリリースされたFirefox98と Safari15.4で実装されたことで、主要ブラウザ(Chrome, Edge, Firefox, Safari)で <dialog> が利用できるようになりました。

<dialog> が利用できるようになり、これまでよりも簡単にモーダルなダイアログが実装できるようになりました。HTMLDialogElement.showModal()でダイアログ以外の要素にフォーカスが当たらないモーダルなダイアログを呼び出せます。

const dialog = document.getElementById("dialog");
const showBtn = document.getElementById("show");

showBtn.addEventListener("click", () => {
  dialog.showModal();
});

また、:modalや::backdropを使うことで、スタイルも簡単に実装できます。

/* オーバレイ部分のスタイル */
.dialog::backdrop {
  background: rgba(0, 0, 0, 0.25);
}
/* モーダルなダイアログ部分のスタイル */
.dialog:modal {
  background-color: #e7f6f2;
}

マウスとキーボードでのフォーカスのスタイルを分けて定義できる :focus-visible

Chrome	Edge	Firefox	Safari
86	86	85	15.4

3 月にリリースされたSafari15.4で実装されたことで、主要ブラウザで利用できるようになりました。

下記の CodePen に :focus と :focus-visible を指定したボタンを用意したので、それぞれマウス・キーボードで操作した場合のフォーカスのスタイルの違いを見てみてください。

それぞれのボタンのラベルに指定したスタイルを記載しています。

only :focus ボタンではマウス操作(クリック)とキーボード操作の両方でアウトラインが表示されるのに対し、only :focus-visible ボタンでは、キーボード操作でのみアウトラインが表示されます。

:focus と :focus-visible の両方を指定した :focus and :focus-visible ボタンではマウス操作時とキーボード操作時でアウトラインの色が変わっていることが確認できます。

主要なブラウザ全てに実装されたのは今年ですが、State of CSS 2022の回答者の割合を見ても、すでに利用している人も多そうです。

重なり合った要素の背後の領域に、ぼかしが入れられる backdrop-filter

Chrome	Edge	Firefox	Safari
76	17	103	9

7 月にリリースされた Firefox103で実装されたことで、主要ブラウザで利用できるようになりました。

backdrop-filter プロパティを指定することで背後の領域に対してスタイルを変化できます。どのような変化があるかの一例を、下記の CodePen にまとめました。

特に blur() による背後の領域のぼかしは簡単に UI の幅を広げられそうですね。

もう少しで主要ブラウザ全てで実装されそうな機能

特定の要素のサイズに合わせてレスポンシブなスタイルが指定できる Container Queries

Chrome	Edge	Firefox	Safari
105	105	Nightly	16

8 月にリリースされた Chrome105と 9 月にリリースされたSafari16で Container Queries が実装されました。Firefox でも実装が進められており、現在、Nightly で利用が可能です。

@container ルールを利用することで、指定した要素の状態(幅や高さなど)に応じたスタイルを定義できるようになります。

.container {
  container-type: inline-size;
}

/* .containerが指定された要素の幅に合わせてスタイルを変更する */
@container (max-width: 800px) {
  .card {
    display: block;
  }
}

CodePen のサンプルでは、.container を指定した要素の幅に応じて子要素の display を flex から block に変更しています。

Container Queries は要素に対してレスポンシブにスタイルを指定できるので、コンポーネントベースの開発とも相性が良さそうです。Firefox の実装も進んでいるので、来年が楽しみです。

セレクターで指定した条件に当てはまった場合にスタイルを指定できる :has()

Chrome	Edge	Firefox	Safari
105	105	🙅	15.4

3 月にリリースされたSafari15.4 と 8 月にリリースされた Chrome105で実装されました。Firefox では 103 からフラグ付きで試すことができます。

:has() の引数にセレクターを渡すことで、その条件に当てはまった場合のスタイルを指定できます。

<style>
  /* .card-hasを指定した要素の子要素にpicture要素がある場合のh2要素のスタイル */
  .card-has:has(> picture) h2 {
    font-size: 1rem;
  }
</style>

<div class="card-has">
  <!-- 子要素に<picture>がある -->
  <picture>
    <img />
  </picture>
  <h2>nus3 blog</h2>
</div>
<div class="card-has">
  <h2>nus3 blog</h2>
</div>

:has() に関してもFirefox のロードマップにはありそうなので、実装されるのが待ち遠しいですね！