公開日: 2025 年 1 月 22 日
Interop 2024 が終了するにあたって、この投稿では、プロジェクト史上最も成功した年を振り返ります。最終的に、すべての試験運用版ブラウザが 99 点のスコアを報告し、安定版もそれほど差はありませんでした。この成功により、多くの機能がベースラインで新たに利用可能になりました。
ベースラインの機能の追加
ベースラインの新規機能として扱われるには、相互運用性が確保されている必要があります。そのため、Interop 2024 がそのラインを超えて ベースライン 2024 に多くの機能をもたらしたことは驚くべきことではありません。
登録済みのカスタム プロパティ
@property ルールと CSS.registerProperty() 静的メソッドは、2024 年 7 月にベースラインとして新たに利用可能になりました。
font-size-adjust プロパティ
font-size-adjust CSS プロパティは、x-height などの特定の指標に対してフォントサイズを同じサイズにスケーリングすることで、使用されているフォントに関わらず、表示される文字サイズを維持します。これにより、代替フォントが同じサイズに見えます。2024 年 7 月にベースラインとして新たに利用可能になりました。
- MDN の
font-size-adjust - ウェブ プラットフォーム ダッシュボードの
font-size-adjustエントリ - CSS
font-size-adjustがベースラインに追加されました
<video> の requestVideoFrameCallback() メソッド
<video> の requestVideoFrameCallback() メソッドは、次の動画フレームで実行される関数をスケジュールします。requestAnimationFrame() に似ていますが、動画用で、2024 年 10 月に新たに利用可能になりました。
- MDN の
requestVideoFrameCallback() - ウェブ プラットフォーム ダッシュボードの
requestVideoFrameCallback()エントリ requestVideoFrameCallback()を使用して動画に対して動画フレームごとに効率的なオペレーションを実行する
scrollbar-width と scrollbar-gutter を使用したスクロールバーのスタイル設定
scrollbar-width CSS プロパティはスクロールバーの幅を設定し、scrollbar-gutter はスクロールバーのスペースを予約します。これにより、スクロールバーの表示と非表示の切り替えによるレイアウトの不要な変更を防ぐことができます。2024 年 12 月にベースラインの新規利用可能になりました。
transition-behavior プロパティ
transition-behavior: allow-discrete CSS 宣言を使用すると、アニメーションの動作が離散的なプロパティの遷移を許可できます。このようなプロパティは補間できず、50% で開始値から終了値に切り替わります。このプロパティは、2024 年 8 月にベースラインの新規利用可能になりました。
- MDN の
transition-behavior - ウェブ プラットフォーム ダッシュボードの
transition-behaviorエントリ - ベースラインに追加: エントリ エフェクトのアニメーション
text-wrap: balance
text-wrap CSS プロパティは、コンテナからオーバーフローしたテキストの行の折り返し方法を設定します。これは text-wrap-style と text-wrap-mode の省略形です。balance 値を使用すると、バランスの取れた広告見出しやその他の短いテキストを作成できます。text-wrap プロパティは、2024 年 3 月にベースラインの新規利用可能になりました。
ポップオーバー
ポップオーバーを使用すると、HTML または showPopover() メソッドを使用してオーバーレイを宣言的に作成できます。ベースラインの「新規」にほぼ達していました。実際、当初は達していたと判断していましたが、Safari の実装に関する問題により、2024 年の「新規」には達しませんでした。幸い、この問題は現在の Safari ベータ版 18.3 で修正されているため、まもなくポップオーバーをベースラインの新規対応として適切に発表できるようになります。
ベースライン機能の修正
Interop 2024 には、すでにベースラインの新規利用可能として分類されている機能が含まれていました。この作業では、実装の細かい違いを修正しました。このような問題は、ごく少数のユーザーにしか発生しないかもしれませんが、問題に直面したユーザーにとっては大きな問題となります。
CSS のネスト
CSS のネストを使用すると、ルールをネストすることでセレクタを短くし、読みやすくし、モジュール化を進めることができます。2023 年 12 月にベースラインの新規利用可能となり、未解決の相互運用性の問題を修正するために Interop 2024 に追加されました。
宣言型 Shadow DOM
<template> の shadowrootmode 属性は、JavaScript を使用せずにシャドールートを作成します。これは、attachShadow() メソッドの宣言型の代替手段です。
Interop 2025 は近日提供予定
Interop 2025 の提案書は現在最終段階にあり、今年の成功を基にさらに発展させたいと考えています。2 月に発表される内容をご確認ください。Baseline に追加される機能については、web.dev の Baseline の新機能シリーズをご覧ください。