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

エグゼクティブ・フェロー 木達

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

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

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

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

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

Chrome 117ではgrid-template-columnsgrid-template-rowsの値でsubgridがサポートされ、この念願の機能が相互運用可能になりました。subgridについては、CSS subgridで詳しく紹介しています。

ブラウザサポート:
  • Google Chrome実験的な機能
  • Mozilla Firefox71サポート済み
  • Microsoft Edge実験的な機能
  • Safari16サポート済み

Chromeは、アニメーションの開始や終了を簡単に追加したり、ダイアログやポップオーバーなどの要素をトップレイヤーに表示/非表示させる際のアニメーションをスムースにする、3つの新しいCSS機能をサポートしています。transition-behaviorプロパティ、@starting-styleルール、overlayプロパティについては、Four new CSS features for entry and exit animationsをご覧ください。

ブラウザサポート:
  • Google Chrome×未サポート
  • Mozilla Firefox×未サポート
  • Microsoft Edge×未サポート
  • Safari×未サポート

またChrome 117では、Object.groupByMap.groupByの静的メソッドによるJavaScript配列のグループ化が可能になりました。

ブラウザサポート:
  • Google Chrome×未サポート
  • Mozilla Firefox×未サポート
  • Microsoft Edge×未サポート
  • Safari×未サポート

Safari 17では、Popover APIをサポートするために、popover属性が追加されました。

ブラウザサポート:
  • Google Chrome×未サポート
  • Mozilla Firefox×未サポート
  • Microsoft Edge×未サポート
  • Safari×未サポート

Safari 17とFirefox 118には<search>要素が含まれています。この要素は、WebページまたはWebアプリケーションで、コンテンツを検索またはフィルタリングする機能を含む要素を表します。

ブラウザサポート:
  • Google Chrome×未サポート
  • Mozilla Firefox×未サポート
  • Microsoft Edge×未サポート
  • Safari×未サポート

Safari 17では多くの新たなCSS機能がサポートされましたが、そのなかに@counter-styleがあります。このルールを使用すると、リストにおいてあらかじめ定義されたものではない独自のスタイルをカウンターに定義できます。この機能は、3つのエンジンすべてで利用できるようになりました。

ブラウザサポート:
  • Google Chrome91サポート済み
  • Mozilla Firefox33サポート済み
  • Microsoft Edge91サポート済み
  • Safari17サポート済み

Firefox 118 includes several additional CSS math functions: abs(), sign(), round(), mod(), rem(), pow(), sqrt(), hypot(), log(), and exp().

Firefox 118にはabs()sign()round()mod()rem()pow()sqrt()hypot()log()exp()といった、CSSで使える関数が複巣追加されています。

ブラウザサポート:
  • Google Chrome×未サポート
  • Mozilla Firefox112サポート済み
  • Microsoft Edge×未サポート
  • Safari15.4サポート済み

Safari 17はまた、HEIC/HEIF画像とJPEG XLもサポートしています。

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

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

今月、FirefoxとSafariでサポートされた<search>要素は、Chrome 118でレポートされました。つまり、この要素はもうじきすべてのエンジンで利用できます。

静的メソッドのObject.groupByMap.groupByは、Firefox 119でサポートされます。

Chrome 118には、@scopeルールによるスコープ付きスタイルと、prefers-reduced-transparencyおよびscriptingの新しいメディア機能が含まれます。

目下Safari 17.1は、プラットフォーム全体に関わるさまざまな問題を修正したリリースとして準備中です。