2023 年 4 月に Stable 版とベータ版のウェブブラウザに導入された興味深い機能をいくつかご紹介します。
安定版ブラウザのリリース
2023 年 4 月に、Firefox 112、Chrome 112 が安定版になりました。これがウェブ プラットフォームにとってどのような意味を持つのかを見ていきましょう。
inert 属性
Firefox 112 には、inert グローバル属性が含まれています。この属性は、要素を無視するようにブラウザに指示します。これは、インタラクティブではないコンテンツであることを示します。つまり、
clickイベントが発生しないようにします。- 要素がフォーカスを取得できないようにします。
- ユーザー補助ツリーから要素とそのコンテンツを除外します。
この属性は、3 つのエンジンすべてで相互運用可能になりました。
linear() イージング関数
linear() イージング関数を使用すると、複数のポイント間の線形補間を行うことができます。これにより、バウンス効果や弾力効果などのより複雑なアニメーションが可能になります。この機能は Firefox 112 に搭載されています。
対応ブラウザ
- 113
- 113
- 112
- 17.2
CSS のネスト
Chrome 112 では、多くのデベロッパーの皆様が待ち望む CSS ネストのサポートが追加されています。新しいネスト セレクタ > が導入されました。これは、プリプロセッサを使用したデベロッパーにとってなじみのある形で、関連するスタイルルールをネストするために使用します。
.nesting {
color: hotpink;
> .is {
color: rebeccapurple;
> .awesome {
color: deeppink;
}
}
}
CSS animation-composition
Chrome 112 では animation-composition もサポートされています。このプロパティの仕組みについては、アニメーション合成で複数のアニメーション効果を合成する方法を指定するをご覧ください。
新しいヘッドレス モード
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> 構文も含まれているため、選択する要素を細かく制御できます。詳しくは、S 構文を使用して :nth-child() の選択をより詳細に制御するをご覧ください。
CSS については、Chrome 113 には overflow-inline、overflow-block、update のメディア機能が含まれています。linear() イージング関数と、接頭辞のない image-set() 型にも組み込まれています。
Chrome 113 には、ウェブ向け WebGL および WebGL 2 グラフィック API の後継である WebGPU も含まれています。GPU コンピューティング、GPU ハードウェアへのオーバーヘッド アクセスの低減、1 つのグラフィック デバイスから複数のキャンバスへのレンダリング機能、優れた予測可能なパフォーマンスなど、最新の機能を提供します。