公開日: 2026 年 3 月 2 日
2026 年 1 月の Baseline ダイジェストをご覧いただきありがとうございます。毎月、ベースラインで新たなマイルストーンに到達したウェブ プラットフォームの機能を紹介し、プロジェクトで今すぐ使用できるツールを把握できるようにします。
1 月は、いくつかの重要な API と CSS 単位が「新たに利用可能」カテゴリに移動し、レイアウトの大幅な改善が「広く利用可能」になったため、エキサイティングな 1 年の始まりとなりました。
ベースラインで新たに利用可能になった機能
以下のウェブ機能は、2026 年 1 月に Baseline Newly で利用可能になりました。
アクティブ ビューの切り替え
:active-view-transition CSS 疑似クラスが Baseline Newly で利用できるようになりました。このセレクタを使用すると、ビューの切り替え中にドキュメントのルート要素をターゲットにしてスタイルを設定できます。これは、移行オーバーレイの背景色の変更や、特定のレイヤの z-index の調整など、移行期間中にのみ存在するグローバル スタイルや調整を適用する場合に特に便利です。
サービス ワーカーの JavaScript モジュール
Service Worker が主要なブラウザ エンジンすべてで JavaScript モジュールをサポートするようになりました。navigator.serviceWorker.register() の呼び出し時に type: 'module' オプションを設定することで、Service Worker スクリプト内で標準の import ステートメントと export ステートメントを使用できます。これにより、サービス ワーカーが最新の JavaScript 開発プラクティスに準拠し、コードの整理、依存関係の管理、メインスレッドとバックグラウンド ワーカー間のコード共有が容易になります。
Navigation API
Navigation API は、従来の History API に代わる最新の専用 API で、シングルページ アプリケーション（SPA）のニーズに合わせて特別に設計されています。ブラウザの [戻る] ボタンや [進む] ボタンでトリガーされるものを含め、あらゆる種類のナビゲーション アクションを開始、インターセプト、管理する一元的な方法を提供します。Maps などのイベントを使用すると、デベロッパーはボイラープレート コードを減らして、よりスムーズなクライアントサイド ルーティングを実装できます。この変更がウェブの構築方法にどのような影響を与えるかについて詳しくは、専用のブログ投稿「最新のクライアントサイド ルーティング: Navigation API」をご覧ください。
rcap CSS 単位
rcap 単位は、ルート要素のフォントの「大文字の高さ」（大文字の公称の高さ）に等しいルートフォント相対長単位です。これにより、フォントサイズだけでなく、サイトで使用されているプライマリ書体に合わせてスケーリングされる正確なタイポグラフィ レイアウトが可能になります。
rch CSS 単位
ch 単位と同様に、rch 単位はルート要素のフォントにおける「0」（ゼロ）グリフの幅（より具体的にはアバンス幅）を表しますが、ルート要素に対する相対値です。ルートフォントの特定の文字数に正確に収まるコンテナなど、文字幅に依存するレイアウトを作成する場合に最適です。
rex CSS 単位
rex 単位は、ex のルート相対バージョンで、ルート要素のフォントの x-height と同じです。この単位は、ドキュメントのメインのタイポグラフィの小文字の高さに対する要素の垂直方向の配置とサイズ設定に特に役立ちます。
ric CSS 単位
ric 単位は、ic 単位のルート相対の対応物です。これは、ルート要素のフォントの「表意文字」の進み幅（通常は CJK 表意文字の幅または高さ）に等しくなります。これは、国際化されたレイアウトを構築するデベロッパー、特に中国語、日本語、韓国語のスクリプトを使用するデベロッパーにとって重要なツールです。
ベースラインの広く利用可能な機能
次のウェブ機能は、2026 年 1 月に Baseline Widely で利用可能になりました。
2 つの値の CSS display プロパティ
display プロパティの複数キーワード構文が Baseline Widely Available になりました。この更新により、ボックスの「外側」と「内側」の両方の表示タイプを明示的に定義できます。たとえば、合成済みの inline-flex の代わりに display: inline flex を使用できます。これにより、要素がブロック フローとインライン フローのどちらに参加するか（外部タイプ）と、その子要素がどのようにレイアウトされるか（内部タイプ、flex や grid など）が明確になります。この変更により、CSS レイアウト エンジンが開発者にとってより論理的で一貫性のあるものになります。
animation-composition CSS プロパティ
animation-composition プロパティは、複数のアニメーションが同じプロパティに同時に影響を与える場合に、それらのアニメーションがどのように相互作用するかを定義します。replace、add、accumulate のいずれかを選択して、複雑なレイヤード アニメーションの計算方法を正確に制御できます。
コピーによる配列
JavaScript に、元のデータを変更せずに配列を変換できるメソッドが追加されました。toReversed()、toSorted()、toSpliced() などのメソッドは、配列の新しい変更されたコピーを返し、より機能的で安全なプログラミング スタイルを促進します。
改善にご協力ください
今回も、Baseline 関連で取り上げていないことがありましたら、お知らせください。今後のエディションで取り上げさせていただきます。Baseline に関するご質問やフィードバックがある場合は、Issue Tracker で問題を報告してください。