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

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

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

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

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

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

WebGPU

Chrome 113では、グラフィックAPIのWebGLおよびWebGL 2の後継にあたるWebGPUがサポートされています。GPU演算、GPUハードウェアへの低オーバーヘッド アクセス、単一のグラフィックデバイスから複数のキャンバスに描画する機能、パフォーマンスと予測可能性の向上といった最新機能が提供されます。

First-Party Sets

First-Party Sets（FPS）は、プライバシーサンドボックスの一部です。これは、サイトどうしの関係を宣言する方法であり、セット内のサイトに対し限定的なサードパーティのCookieにアクセスを許可するタイミングをブラウザが決定できるようにします。FPSは、Chrome 113において段階的なロールアウトを開始しました。

CSSメディア機能など

CSSについては、Chrome 113でoverflow-inlineやoverflow-blockがサポートされました。

そして、updateメディア機能。

また、イージング関数のlinear()もサポートされています。より詳しくは、Create complex animation curves in CSS with the linear() easing functionで詳しく解説しています。

CSS Color Level 4の機能

Firefox 113ではcolor()、lab()、lch()、oklab()、oklch()、color-mix()の各関数表記と、forced-color-adjustプロパティがサポートされています。これにより新しい色空間と関数が、3つの主要なエンジンすべてでサポートされたことになりました。これらについては、High Definition CSS Color Guideで詳しく説明しています。

:nth-child()セレクタを用いたより精緻なコントロール

Firefox 113では、セレクタリストを:nth-child()と:nth-last-child()に渡す機能が追加されました。これについてはMore control over :nth-child() selections with the of S syntaxという記事で詳細を学んだり、事例を確認してください。

Compressions Streams API

Firefox 113でサポートされたことにより、3つの主要なエンジンすべてでサポートされるようになったCompressions Streams APIは、ストリームの圧縮と伸張を可能にします。これは、JavaScript アプリケーションが圧縮ライブラリをバンドルする必要がなくなったことを意味します。

CSSのネスト

Safari 16.5で問題はほぼ解消しましたが、プリプロセッサを使用してきた開発者にはおなじみの、関連するスタイルルールをネストするための新しいCSSのネストのためのセレクタ、>のサポートが追加されています：

.nesting {
  color: hotpink;

  > .is {
    color: rebeccapurple;

    > .awesome {
      color: deeppink;
    }
  }
}

text-wrap:balance;による見出しのバランス調整

Chrome 114からtext-wrap: balance;が使えるようになりました。これにより見出しのバランスを取ることができ、最終行に一語だけ現れるような状況を避け、より美しく読みやすい表示を提供します。詳しくは、CSS text-wrap: balanceをご覧ください。

CHIPS：Cookies Having Independent Partitioned State

サードパーティのCookieを段階的に廃止する一環として、CHIPSは新しいクッキー属性のPartitionedを使用して、トップレベルのサイトによってパーティション化されたサードパーティ クッキーにオプトインできるようにします。CHIPSはChrome 114で利用可能です。

Popover API

また、Chrome 114ではPopover APIが追加され、他のすべてのUIより上位に表示される一時的なユーザーインターフェース（UI）要素を簡単に実装できるようになりました。

これにはアクションメニュー、フォーム要素での提案、コンテンツピッカー、ティーチングUIなど、対話型の要素が含まれます。

新しいpopover属性は、どんな要素でも自動的に最上位レイヤーに表示することができます。つまり開発者は、位置合わせや要素の積み重ね、フォーカスやキーボード操作に悩まされなくなります。

詳しくは、Introducing the popover APIをご覧ください。

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

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

Chrome 115では、CSSのdisplayプロパティに複数の値が追加されました。つまりdisplay: flex;はdisplay: block flex;に、display: block;はdisplay: block flow;になります。単一値はレガシーキーワードとして維持され、Chrome Stableになると、すべてのエンジンで複数の値が利用できるようになります。

またChrome 115では、Web Animations仕様の拡張機能として、ScrollTimelineとViewTimelineが追加されています。これらは、CSSとJavaScriptによるスクロール駆動のアニメーションを可能にします。

Firefox 114には、WebSocketの最新版であるWebTransport APIが含まれており、複数のストリームや一方向のストリーム、アウト・オブ・オーダーの配信をサポートしています。