2023 年 12 月に安定版およびベータ版のウェブブラウザでリリースされた興味深い機能をいくつかご紹介します。
安定版ブラウザのリリース
2023 年 12 月、Firefox 121、Chrome 120、Safari 17.2 が安定版になりました。この投稿では、ウェブ プラットフォームへの影響について説明します。
CSS ネストの緩和解析
Chrome 120 と Safari 17.2 には、CSS のネストの緩和解析が含まれています。これは Firefox のバージョン 117 以降でサポートされていたため、すべての主要なエンジンがこの構文の変更をサポートすることになります。
<details> 要素を含む排他アコーディオン
Chrome 120 と Safari 17.2 では、<details> 要素の name 属性がサポートされています。つまり、多くの <details> 要素をグループ化することで、専用のアコーディオン コンポーネントを作成できます。
詳しくは、専用のアコーディオンをご覧ください。
対応ブラウザ
- 120
- 120
- x
- 17.2
:has() セレクタ
Firefox 121 には CSS :has() セレクタが含まれています。このリリースにより、すべての主要なエンジンで :has() の相互運用が可能になりました。
詳しくは、:has(): ファミリー セレクタをご覧ください。
CSS Custom Highlight API
Safari 17.2 には CSS Custom Highlight API が搭載されており、テキスト範囲の作成やスタイル設定を行い、::selection などの標準のハイライト疑似クラスを拡張できます。
CloseWatcher API
Chrome 120 には、クローズ リクエストをリッスンして応答するための新しい API である CloseWatcher API が含まれています。
このようなリクエストは、パソコンの場合は ESC キー、Android の場合は「戻る」ジェスチャーまたはボタンによってトリガーされるため、実装が難しい場合があります。
API に加えて、Chrome 120 では Android の [戻る] ボタンに応答するように <dialog> と popover 属性がアップグレードされています。
対応ブラウザ
- 120
- 120
- x
- x
CSS の text-wrap: balance と stable
Firefox 121 には、text-wrap の balance と stable の値が含まれています。balance 値は、見出しなどの短いコンテンツ ブロックに役立ち、より楽しく読みやすいテキストを作成します。stable 値を指定すると、編集中に編集可能なコンテンツが再実行されなくなります。
詳細については、text-wrap: balance についてをご覧ください。
<iframe> 要素の遅延読み込み
Firefox 121 では、<iframe> 要素の loading 属性がサポートされています。つまり、すべての主要なエンジンで iframe の遅延読み込みがサポートされるようになりました。
対応ブラウザ
- 77
- 79
- 121
- 16.4
linear() イージング関数のサポート
Safari 17.2 は、バウンス効果やばね効果の作成に使用できる linear() イージング関数もサポートしています。
対応ブラウザ
- 113
- 113
- 112
- 17.2
ベータ版ブラウザのリリース
ベータ版ブラウザのバージョンでは、ブラウザの次の安定版でリリースされる機能をプレビューできます。この機会に、一般公開に先駆けて、サイトに影響する可能性がある新機能や削除についてテストすることをおすすめします。新しいベータ版は Firefox 122、Chrome 121、Safari 17.3 です。これらのリリースは、プラットフォームに多くの優れた機能をもたらします。詳しくはリリースノートをご覧ください以下に、その一部をご紹介します。
Firefox 122 と Chrome 121 には、HTMLSelectElement の showPicker() メソッドが含まれています。要素が選択されたときに表示されるものと同じ選択ツールが表示されますが、ボタンの押下やその他のユーザー操作からトリガーできます。
Chrome 121 では、スクロールバーのスタイル設定プロパティ scrollbar-color と scrollbar-width が追加されました。また、SVG 用の CSS マスキングが改善され、スペルミスや文法的に正しくないテキスト用の疑似要素がハイライト表示されます。