2023 年 3 月に Stable 版と Beta 版のウェブブラウザに導入された興味深い機能をいくつかご紹介します。
安定版ブラウザのリリース
2023 年 3 月に、Firefox 111、Chrome 111、Safari 16.4 が安定版になりました。これがウェブ プラットフォームにとってどのような意味を持つのかを見ていきましょう。
グローバル HTML 属性
Firefox 111 では、いくつかの有用なグローバル HTML 属性のサポートが追加されています。autocapitalize 属性は、ユーザーが仮想キーボードで入力したときにテキストを自動的に大文字にするかどうかを指定します。
translate 属性は、ページのローカライズ時に要素を翻訳する必要があるかどうかを示します。
Origin Private File System（OPFS）
Firefox では、File System Access API を使用する際に Origin Private File System（OPFS）のサポートが追加されました。OPFS の詳細
View Transitions API
Chrome 111 では View Transitions API が追加され、ビューのスナップショットを作成し、状態間で重複することなく DOM を変更できるようにすることで、シングルページ アプリ（SPA）での洗練された遷移を簡単に作成できるようになりました。
詳しくは、リリース投稿の Chrome 111 で SPA のビュー移行を実装をご覧ください。
CSS の新しい色空間と関数
また、Chrome 111 には、ウェブ上でのまったく新しい色の使用方法が用意されています。Chrome で、RGB 色域以外の色にアクセスする色空間と、color() 関数と color-mix() 関数がサポートされるようになりました。詳しくは、高精細 CSS カラーガイドと color-mix() のブログ投稿をご覧ください。
Chrome リリースには、この新しいカラー機能の操作に役立つ新しい DevTools も含まれています。
:nth-child() の選択をより詳細に制御
Chrome 111 では、セレクタリストを :nth-child() と nth-last-child() に渡す機能が追加されました。詳細と例については、S 構文を使用した :nth-child() の選択の詳細な制御の投稿をご覧ください。
対応ブラウザ
- 111
- 111
- 113
- 9
Media Session API で前後のスライドをサポート
最後に Chrome 111 で追加された機能は、メディア セッション API のプレゼンテーション用のスライド アクション（"previousslide" と "nextslide"）です。
対応ブラウザ
- 111
- 111
- x
- x
Safari での疑似クラスのサポート
Safari 16.4 は、このウェブ プラットフォームの素晴らしいリリースです。この記事ですべての追加機能を網羅しているわけではないため、Safari 16.4 リリースノートで全機能の一覧をご確認ください。
このリリースでは、:user-invalid、:user-valid、:dir()、:modal、:fullscreen など、多数の CSS 疑似クラスがサポートされています。
メディアクエリの新しい範囲構文
この Safari リリースでは、メディアクエリの Range 構文がより洗練され、使いやすくなりました。これにより、3 つのエンジンすべてで相互運用が可能になります。この構文の例は、こちらの投稿（Chrome でこの構文がリリースされた時点で公開された）をご覧ください。
CSS のプロパティと値
Safari 16.4 では、@property のサポートが追加され、スタイルシートで CSS カスタム プロパティを直接登録できるようになりました。詳しくは、@property: CSS 変数に特殊能力を与えるをご覧ください。
CSS API のサポート
CSS Typed OM のサポートなど、CSS の便利な追加機能が今後も続々と登場しています。この API は、CSS 値を文字列ではなく、型付き JavaScript オブジェクトとして公開します。これにより、JavaScript から CSS を簡単に操作でき、既存のメソッドよりもパフォーマンスが向上します。
また、CSSStyleSheet() を使用した作成可能なスタイルシートもサポートされています。これにより、ドキュメントとその Shadow DOM サブツリーの間でスタイルシートを共有できます。このバージョンの Safari では、作成可能なスタイルシートが 3 つのエンジンすべてでサポートされるようになりました。
ウェブプッシュと Badging API
Safari で Web Push と Badging API がサポートされるようになりました。これはアプリ デベロッパーにとって朗報です。特にこのバージョンでは、すべての主要エンジンでプッシュ通知がサポートされています。
地図をインポート
機能の相互運用を可能にするもう一つの要素は、JavaScript の Import maps の追加です。これにより、ES モジュールのインポートがはるかに容易になります。
対応ブラウザ
- 89
- 89
- 108
- 16.4
ベータ版ブラウザのリリース
ベータ版ブラウザのバージョンでは、次の安定バージョンのブラウザのプレビュー機能が提供されます。この機会に、自分のサイトがリリースされる前に新しい機能や削除をテストすることをおすすめします。新しいベータ版は Firefox 112、Safari 16.5、Chrome 112 です。これらのリリースは、プラットフォームに多くの優れた機能をもたらします。主な内容については、リリースノートをご覧ください。
Firefox 112 では、inert 属性のサポートが追加され、この便利な属性をすべてのエンジンで利用できるようになりました。inert の詳細については、inert の概要をご覧ください。Firefox でも linear() イージング関数がサポートされる予定です。
Chrome 112 と Safari 16.5 では、どちらも CSS ネストのサポートが追加されています。この機能は、多くのデベロッパーの皆様が強く期待している機能です。
Chrome 112 では animation-composition もサポートされています。このプロパティの仕組みについては、アニメーション合成で複数のアニメーション効果を合成する方法を指定するをご覧ください。
Puppeteer などで Chrome のヘッドレス モードを使用している場合、112 ではまったく新しいヘッドレス モードが導入されます。詳しくは、Chrome のヘッドレス モードがアップグレードをご覧ください。