🌊

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

nus32022/12/16に公開

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

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

https://youtu.be/ccysINf4qTE?t=17514

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

ダイアログ要素 <dialog>

Chrome Edge Firefox Safari
37 79 98 15.4

3 月にリリースされたFirefox98Safari15.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の回答者の割合を見ても、すでに利用している人も多そうです。

State of CSS 2022で公開された:focus-visibleの利用率

重なり合った要素の背後の領域に、ぼかしが入れられる 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 を指定した要素の幅に応じて子要素の displayflex から 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 のロードマップにはありそうなので、実装されるのが待ち遠しいですね!

GitHubで編集を提案
サイボウズ フロントエンドエキスパートチーム

サイボウズのフロントエンドを最高にする活動をしています #CybozuFrontendExpert

Discussion

ログインするとコメントできます