2023年10月のWebプラットフォームの新機能

このページの一部は、Google が作成し、クリエイティブ・コモンズ 4.0 著作権表示情報に記載されている用語に従って使用されている、著作物を複製したものです。

以下の内容は、2023年10月31日に公開された記事「New to the web platform in October」の日本語訳です。翻訳の正確性は保証いたしかねますので、必要に応じ原文を参照ください。また、ブラウザサポートについては原文公開時点のbrowser-compat-dataに基づいており、必ずしも最新の状況を反映しているとは限りませんので、ご注意ください。

2023年10月に安定版およびベータ版のWebブラウザに搭載された興味深い機能を複数ご紹介します。

安定版ブラウザのリリース

2023年10月にはFirefox 119、Safari 17.1、Chrome 118とChrome 119が安定版となりました。これがWebプラットフォームにとって何を意味するか、見ていきましょう。

Firefox 119のJavaScript機能

Firefox 119が、Object.groupByとMap.groupByの静的メソッドによるJavaScript配列のグループ化をサポートしました。

また、Firefox 119ではisWellFormed()とtoWellFormed()の両Stringメソッドがサポートされました。これらは、文字列が整形式のUnicodeを含んでいるかどうかをチェックしたり、また文字列を整形式のUnicodeにサニタイズするために使用できます。いずれのメソッドも、3つの主要なエンジンで相互運用できるようになりました。

<search>要素が相互運用可能に

Chrome 118では、WebページまたはWebアプリケーションで、検索やフィルタリングの機能を表す新しいHTML要素、<search>要素がサポートされました。この要素は、3つの主要なエンジンで相互運用が可能になりました。

select要素内におけるhr要素

10月には2度、Chromeでメジャーバージョンがリリースされました。そのうちChrome 119では、<select>要素について、ちょっとした変更が加えられています。その変更により、選択式のメニューにおいて、項目どうしを区切る水平線を表示できるようになりました。より詳しくは、Select element: now with horizontal rulesをお読みください。

スコープ付きスタイル

Chrome 118は、@scope規則によるスコープ付きスタイルをサポートしました。この規則は、DOMにおいてサブツリーにある要素に限ってスタイルを適用する手段を提供します。より詳しくは、Limit the reach of your selectors with the CSS @scope at-ruleをお読みください。

CSSのprefers-reduced-transparency

Chrome 118は、メディア機能のprefers-reduced-transparencyをサポートしました。これは、ユーザーがデバイスで設定した選好をチェックし、コードを通じてそのユーザーニーズに対応するための、一連の機能の1つです。より詳しくは、CSS prefers-reduced-transparencyをご覧ください。

CSSの相対色構文

Chrome 119は、その強力な新機能として、CSS Color Module Level 5に定義されている相対色構文をサポートしました。これにより、どの色空間や構文であっても、ある色から別の色を派生させることができます。

WebAssemblyのガベージコレクション（WasmGC）

Chrome 119は、WebAssemblyでKotlinやPHP、Javaにあるようなガベージコレクション機能を高速化するWasmGCをサポートしています。詳しくはWebAssembly Garbage Collection (WasmGC) now enabled by default in Chromeをお読みください。

ベータ版ブラウザのリリース

ベータ版のブラウザは、次の安定版で実装されるもののプレビューを提供します。新機能や既存機能の削除など、あなたのサイトに影響を与える可能性のあるものを、リリース前にテストする絶好の機会です。新しいベータ版はFirefox 120とSafari 17.2です。これらのリリースは、プラットフォームに多くの素晴らしい機能をもたらします。詳細はリリースノートをご覧ください。ここでは、ハイライトをいくつかご紹介します。

Safari 17.2では多くの新機能がサポートされています。CSSについては、CSS Custom Highlight API、mask-borderプロパティ、counter-setプロパティ、その他多くの機能がサポートされています。また、相互運用性を向上させるために、既存の機能に多くの修正が加えられています。

HTMLに関して、Safari 17.2は<details>要素のname属性をサポートしています。また、Web APIではFetch Priorityがサポートされ、レスポンシブイメージが<link rel=preload>で有効になりました。

Firefox 120では、CSSのrhおよびrlh単位、text-wrap: balance、light-dark()関数のサポートが追加されました。