4 月にウェブ プラットフォームを初めて導入

2023 年 4 月に安定版とベータ版のウェブブラウザに導入された興味深い機能の一部をご紹介します。

Rachel Andrew

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

2023 年 4 月に、Firefox 112 と Chrome 112 が安定版になりました。ウェブ プラットフォームにどのような影響があるか見てみましょう。

inert 属性

Firefox 112 には、inert グローバル属性が含まれています。この属性は、要素を無視するようブラウザに指示し、インタラクティブにすべきでないコンテンツであることを示します。。

  • click イベントの発生を防ぎます。
  • 要素にフォーカスが当たるのを防ぎます。
  • 要素とそのコンテンツをユーザー補助ツリーから除外します。

この属性は、3 つのエンジンすべてで相互運用できるようになりました。

対応ブラウザ

  • Chrome: 102。
  • Edge: 102.
  • Firefox: 112.
  • Safari: 15.5。

ソース

linear() イージング関数

linear() イージング関数を使用すると、複数のポイント間の線形補間が可能になります。これにより、バウンドや弾性効果などのより複雑なアニメーションが可能になります。この機能は Firefox 112 で利用できます。

対応ブラウザ

  • Chrome: 113。
  • Edge: 113.
  • Firefox: 112.
  • Safari: 17.2。

CSS のネスト

Chrome 112 では、多くのデベロッパーが待ち望んでいたCSS ネストのサポートが追加されました。これにより、関連するスタイルルールをネストするために使用される新しいネスト セレクタ > が導入されます。これは、プリプロセッサを使用したことがあるデベロッパーには馴染みのある方法です。

.nesting {
  color: hotpink;

  > .is {
    color: rebeccapurple;

    > .awesome {
      color: deeppink;
    }
  }
}

対応ブラウザ

  • Chrome: 120。
  • エッジ: 120。
  • Firefox: 117.
  • Safari: 17.2。

ソース

CSS animation-composition

Chrome 112 では、animation-composition のサポートも追加されています。このプロパティの仕組みについては、複数のアニメーション エフェクトを animation-composition で合成する方法を指定するをご覧ください。

対応ブラウザ

  • Chrome: 112。
  • Edge: 112.
  • Firefox: 115。
  • Safari: 16。

ソース

新しいヘッドレス モード

Puppeteer などで Chrome のヘッドレス モードを使用している場合は、112 でまったく新しいヘッドレス モードが導入されます。詳しくは、Chrome のヘッドレス モードがアップグレードをご覧ください。

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

ブラウザのベータ版では、ブラウザの次期安定版に搭載される機能のプレビューを確認できます。リリース前に、サイトに影響する可能性がある新機能や削除をテストできます。新しいベータ版は 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 of <selector> 構文も含まれているため、選択する要素をより細かく制御できます。詳しくは、of S 構文を使用して :nth-child() の選択をより細かく制御するをご覧ください。

CSS の場合、Chrome 113 には overflow-inline、overflow-block、update のメディア機能が含まれています。linear() イージング関数と接頭辞のない image-set() 型にも含まれています。

Chrome 113 には、ウェブ向けの WebGL と WebGL 2 のグラフィック API の後継である WebGPU も含まれています。GPU コンピューティング、GPU ハードウェアへのアクセスのオーバーヘッドの低減、単一のグラフィック デバイスから複数のキャンバスへのレンダリング、より優れた予測可能なパフォーマンスなどの最新機能を提供します。

ウェブ初心者向けシリーズの一部