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

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

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

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

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

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

inert属性

Firefox 112でinert属性がサポートされました。この属性は、ブラウザにその要素を無視するよう伝え、インタラクティブではないコンテンツであることを示します。具体的には

• clickイベントを発火させません
• 要素にフォーカスを当てさせません
• アクセシビリティツリーから要素とその内容を除外します

この属性は、現在3つのエンジンすべてで相互運用可能です。

イージング関数のlinear()

イージング関数のlinear()は、複数のポイント間の線形補間を可能にします。これによりバウンスやエラスティック効果など、より複雑なアニメーションが可能になります。この関数がFirefox 112でサポートされました。

CSSのネスト

Chrome 112では、多くの開発者が待ち望んでいたCSSのネストがサポートされました。これは、プリプロセッサを使用している開発者にはなじみのある、スタイルルールをネストするために使用される新しいネストセレクタの>を導入しています：

.nesting {
  color: hotpink;

  > .is {
    color: rebeccapurple;

    > .awesome {
      color: deeppink;
    }
  }
}

CSS animation-compositionプロパティ

Chrome 112は、animation-compositionプロパティをサポートしました。このプロパティがどのように機能するかは、Specify how multiple animation effects should composite with animation-compositionをご覧ください。

新たなヘッドレスモード

PuppeteerなどでChromeのヘッドレスモードをお使いの方に向けては、バージョン112で全く新しいヘッドレスモードが提供されています。詳しくは、Chrome's Headless mode gets an upgradeをご覧ください。

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

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

Firefox 113ではcolor()、lab()、lch()、oklab()、oklch()関数がサポートされています。また、CSS Color 5のcolor-mix()関数やforced-color-adjustプロパティもサポートされます。

またFirefoxでは、:nth-child()による選択が強化され、より細かく選択したい要素を選択できます。詳しくは、More control over :nth-child() selections with the of S syntaxをご覧ください。

CSSに関し、Chrome 113でoverflow-inline、overflow-block、updateメディア機能がサポートされます。また、イージング機能のlinear()、接頭辞なしのimage-set()関数もサポートされます。

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