2024 年 4 月に安定版およびベータ版のウェブブラウザでリリースされた、興味深い機能をいくつかご紹介します。
安定版ブラウザのリリース
2024 年 4 月に、Firefox 125 と Chrome 124 が安定版になりました。この投稿では、ウェブ プラットフォームに追加された新機能を紹介します。
4 つの新機能がベースラインに導入
Firefox 125 では、新たに利用可能になったベースラインに 4 つの新機能が追加されました。Popover API、Intl.Segmenter、align-content（ブロック レイアウト用）、content-box 値と stroke-box 値（transform-box 用）。
Popover API
Popover API を使用すると、さまざまな種類の非モーダル ポップアップを作成できます。これには、ツールチップ、メニュー、カスタム トースト ポップアップなどが含まれます。 ポップオーバーには、これまで JavaScript を作成する必要があった組み込み機能が多数含まれています。詳しくは、Popover API がベースラインに登場をご覧ください。
Intl.Segmenter
Intl.Segmenter は、ローカルに認識されるテキスト セグメンテーションを有効にします。たとえば、単語がスペースで区切られていない言語では、単語を分割できます。その仕組みについては、Intl.Segmenter オブジェクトが Baseline の一部になったをご覧ください。
align-content（ブロック レイアウトの場合）
align-content プロパティがすべての主要なエンジンでブロック レイアウトでサポートされるようになりました。つまり、親にフレキシブル レイアウトまたはグリッド レイアウトを作成しなくても、ブロック方向の配置を行うことができます。ブロック レイアウトの align-content プロパティがベースラインの一部になりました で例をご覧ください。
対応ブラウザ
- 123
- 123
- 125
- 17.4
CSS transform-box
最後に、Firefox 125 では、transform-box プロパティの content-box と stroke-box の値が使用されます。content-box 値はコンテンツ ボックスを使用し、stroke-box は SVG のシェイプを含むストローク境界ボックスです。
対応ブラウザ
- 118
- 118
- 125
- 13.1
WebSocketStream API
WebSocketStream API は、WHATWG Streams を WebSocket API と統合します。Chrome 124 で使用できます。詳細については、WebSocketStream: ストリームと WebSocket API の統合をご覧ください。
対応ブラウザ
- 124
- 124
- x
- x
setHTMLUnsafe、parseHTMLUnsafe
Chrome 124 には、JavaScript から宣言型 Shadow DOM を使用できるように、setHTMLUnsafe メソッドと parseHTMLUnsafe メソッドも含まれています。また、innerHTML や DOMParser と比べて、HTML を命令的に DOM に解析する簡単な方法もあります。
対応ブラウザ
- 124
- 124
- 123
- 17.4
ベータ版ブラウザのリリース
ベータ版ブラウザのバージョンでは、ブラウザの次の安定版でリリースされる機能をプレビューできます。この機会に、一般公開に先駆けて、サイトに影響する可能性がある新機能や削除についてテストすることをおすすめします。新しいベータ版は Firefox 126、Safari 17.5、Chrome 125 です。これらのリリースは、プラットフォームに多くの優れた機能をもたらします。詳しくはリリースノートをご覧ください以下に、その一部をご紹介します。
Safari 17.5 には light-dark() カラー関数が含まれており、17.5 が安定版になると、ベースラインとして新たに利用可能になります。
また、ベースラインとして新たに利用可能になったのは、CSS の Stepped 値関数です。Chrome 125 には、round()、mod()、rem() が含まれています。
Chrome 125 には、Compute Pressure API と CSS アンカー ポジショニングも含まれています。
Firefox 126 には Screen Wake Lock API が含まれており、別の機能であるベースラインが新たに利用可能になりました。