2023 年 3 月に Stable 版およびベータ版のウェブブラウザに追加された興味深い機能をいくつかご紹介します。
安定版のブラウザのリリース
2023 年 3 月に、Firefox 111、Chrome 111、Safari 16.4 が安定版になりました。これがウェブ プラットフォームに与える影響を見ていきましょう。
グローバル HTML 属性
Firefox 111 では、いくつかの便利なグローバル HTML 属性のサポートが追加されています。autocapitalize 属性は、ユーザーが仮想キーボードで入力したときにテキストを自動的に大文字にするかどうかを制御します。
translate 属性は、ページがローカライズされたときに要素を翻訳するかどうかを示します。
配信元プライベート ファイル システム（OPFS）
Firefox では、File System Access API を使用する場合のオリジン プライベート ファイル システム（OPFS）のサポートが追加されます。詳しくは、OPFS についての記事をご覧ください。
View Transitions API
Chrome 111 で View Transitions API が追加され、シングルページ アプリ（SPA）でビューのスナップショットを作成し、状態間の重複なしに DOM を変更できるようにすることで、洗練された遷移の作成が簡単になります。
詳しくは、SPA ビューの移行が Chrome 111 で利用可能にのリリース後をご覧ください。
CSS の新しい色空間と関数
Chrome 111 には、ウェブで色を使用するまったく新しい方法も追加されています。Chrome で、color() 関数と color-mix() 関数に加え、RGB 色域外の色にアクセスする色空間がサポートされるようになりました。詳しくは、高解像度 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 リリースノートをご覧ください。
このリリースでは、多数の CSS 疑似クラス（:user-invalid、:user-valid、:dir()、:modal、:fullscreen）がサポートされています。
メディアクエリの新しい範囲構文
今回の Safari リリースでは、メディアクエリ用の範囲構文が従来より洗練され、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 でウェブプッシュと 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 もサポートされています。このプロパティの仕組みについては、アニメーション構成で複数のアニメーション効果を合成する方法を指定するをご覧ください。
Chrome のヘッドレス モード（Puppeteer など）を使用している場合、112 ではまったく新しいヘッドレス モードが導入されます。詳しくは、Chrome のヘッドレス モードのアップグレードについてをご覧ください。
ウェブの最新情報シリーズの一部