Google I/O で、昨年の I/O での発表以降、ベースラインがどのように進化しているかについてニュースを共有しました。ウェブ プラットフォーム ダッシュボード、RUM Archive との統合、RUMvision との今後の統合についても発表しました。この投稿では、講演で取り上げたすべてのリソースを 1 か所にまとめます。
ウェブ プラットフォーム ダッシュボードは、ウェブ プラットフォーム全体と個々の機能の相互運用性の過程を確認するための新しい方法です。これにより、ベースラインに含まれるようになります。詳細については、ウェブ プラットフォーム ダッシュボードの発表をご覧ください。
Baseline を日常的に使用するツールと統合することは、このプロジェクトのビジョンの一つでした。Google は、ユーザーがブラウザの互換性への対応について、あまり時間をかけて考える必要がないようにしたいと考えています。RUM Archive インテグレーションの詳細を確認し、今後さらに多くのツール プロバイダに関するニュースをお届けする予定です。
新規ベースライン
I/O では、最近ベースラインから利用可能になった 12 のウェブ プラットフォーム機能を共有しました。これらの機能は現在、Chrome、Edge、Firefox、Safari で利用可能です。開発を効率化する小規模な追加機能から、コンテナクエリや :has() など、デベロッパーが最も必要としている機能まで、多岐にわたります。
コンテナクエリのサイズを設定する
コンテナサイズクエリを使用すると、メディアクエリでビューポートのサイズのみを指定するのではなく、コンテナの幅やインライン サイズに基づいてデザインを変更できます。これにより、再利用可能なコンポーネントが実現し、レイアウトに配置する際に利用可能なスペースに基づいてコンポーネントを変更できます。レスポンシブ デザインのコンセプトが形成されている限り、それらは最も欲しい機能リストの 1 位に選ばれています。
- 2023 年 2 月にリリースされました。
- 2025 年 8 月に広く利用できるようになります。
MDN のコンテナクエリの詳細については、コンテナクエリが安定版のブラウザに保存されるをご覧ください。また、コンテナクエリのケーススタディで、他の開発チームが活用している方法を確認してください。
:has()セレクタ
:has() セレクタは、長年にわたってデベロッパーから最も多く寄せられたリクエストの一つです。親セレクタは、内部の要素に基づいて要素を選択する手段です。:has() はそれだけではありません。
コンテナクエリと同様に、コンポーネントに含まれる内容に合わせて単一のコンポーネントを作成できるため、再利用可能なコンポーネントを作成するときに非常に便利です。
- 2023 年 12 月にリリースされました。
- 2026 年 6 月に広く利用できるようになります。
MDN の :has()、:has() ファミリー セレクタ、:has() の事例紹介をご覧ください。
CSS グリッド レイアウトのサブグリッド
Subgrid を使用すると、ネストされたグリッド レイアウトで親からトラックを継承できます。ネストされたグリッド内でアイテムを適切に配置できます。
- 2023 年 12 月にリリースされました。
- 2026 年 6 月に広く利用できるようになります。
MDN のサブグリッドと、他の多くのリソースにリンクされている CSS サブグリッドの詳細をご覧ください。
CSS ネスト
近年、CSS は、デベロッパーが Sass などのプリプロセッサで使用している機能から着想を得ています。たとえば、CSS カスタム プロパティ（CSS 変数とも呼ばれる）は、色などの変数を 1 か所で設定して CSS 全体で使用できる、広く利用可能な機能です。これまではプリプロセッサを使用する場合のみ利用可能でした。
プリプロセッサのもう一つの機能は Nesting（ネスト）です。ネストすることで、関連する要素を簡単にグループ化できるため、セレクタの繰り返しを回避できるとともに、CSS の読みやすさが向上します。
- 2023 年 8 月にリリース
- 2026 年 2 月に広く利用可能
詳しくは、MDN での CSS ネストと CSS ネストをご覧ください。
HTML <search> 要素
検索は多くのサイトやアプリに登場するものですが、最近までは、ページの検索やフィルタリングに使用する機能をマークアップする要素はありませんでした。<search> 要素はこの目的のために設計されています。この要素は、検索フォームや結果のフィルタリングに使用する他の要素を配置できる要素として存在します。
- 2023 年 10 月にリリース予定
- 2026 年 4 月に広く利用可能
詳しくは、MDN の <search> 要素をご覧ください。
レスポンシブ動画
この機能は、<video> 要素内で <source> 要素を使用して、さまざまなサイズの画像を配信できるのと同じ方法で、適切なサイズの動画をさまざまなデバイスに配信することを指します。
- 2023 年 11 月にリリース予定
- 2026 年 5 月に広く利用可能
MDN の詳細については、Media 要素または Image Source 要素とレスポンシブ動画の使用方法をご覧ください。
inert 属性
不活性な要素は操作できません。たとえば、ダイアログを開くときに、ダイアログの背後にあるページにある要素をクリックしたり、タブで移動したりすることはできません。inert 属性を使用すると、UI の任意の部分の不活性を制御できます。
要素に inert 属性を適用すると、要素がクリックされても要素がフォーカスされず、ユーザー補助ツリーから除外されているため、その要素とそのコンテンツは支援技術で非表示になり、クリック イベントは呼び出されません。
- 2023 年 4 月にリリース予定
- 2025 年 10 月に広く利用可能
詳細については、MDN の inert と inert 属性をご覧ください。
color-mix() 関数
color-mix() 関数を使用すると、使用可能な色空間で、ある色を別の色に混在させることができます。これには、最近 Baseline Newly Available の一部となった新しい色モデル（LCH、Lab、OKLCH、OKLab）が含まれます。
- 2023 年 4 月にリリース予定
- 2025 年 10 月に広く利用可能
詳しくは、MDN の color-mix() と CSS color-mix() をご覧ください。また、CSS で使用できる新しいカラーモデルをすべて網羅した高解像度 CSS カラーガイドも用意されています。さらに、gradient.style の新色を試して、美しいグラデーションを作成してみてください。
:user-valid、:user-invalid
疑似クラス :valid と :invalid はブラウザで広く使用でき、フォーム要素が制約ルールに従って現在有効か無効かを示します。そのため、メールタイプのフィールドがあり、そのフィールドに名前が含まれている場合、:invalid 疑似クラスによってそのフィールドが選択され、色やアイコンを追加して修正が必要であることを示すことができます。
:valid 疑似クラスと :invalid 疑似クラスの問題は、ユーザーがフォームを操作する前に適用されることです。そのため、必須のフォーム要素をユーザーがまだ完了していない場合は、無効なスタイルが表示されます。通常、無効なスタイルを表示するのは、ユーザーが入力した内容に誤りがあったり、フィールドをスキップして空白になったりした場合だけです。
この状況でユーザー エクスペリエンスを改善するには、:user-valid 疑似クラスと :user-invalid 疑似クラスを使用します。これらはほぼ同じように動作しますが、ユーザーがフィールドを操作したときにのみ一致する点が異なります。したがって、必須フィールドの例では、ユーザーがフィールドにタブで移動するかクリックし、入力を完了せずに移動しないとフィールドに無効な状態が表示されます。
- 2023 年 10 月にリリース予定
- 2026 年 4 月に広く利用可能
MDN の :user-valid と :user-invalid の詳細。
圧縮ストリーム
多くのウェブ アプリケーションでは、zip ファイルなどの圧縮形式でユーザーにダウンロードを提供する必要があります。これまでは、アプリケーションに圧縮ライブラリ（すべてのユーザーのアプリケーション サイズを増加させるコード）を組み込む必要がありました。Compression Streams API は、データ ストリームを圧縮する組み込み方法を提供します。
- 2023 年 5 月にリリース
- 2025 年 11 月に広く利用可能
詳しくは、MDN の Compression Streams API とすべてのブラウザで圧縮ストリームがサポートされるようになりましたをご覧ください。
宣言型 Shadow DOM
宣言型 Shadow DOM は、HTML から Shadow ツリーを作成する新しい方法です。以前は、attachShadow() を使用して JavaScript からのみシャドウツリーを作成できました。これを HTML からできることは、メール クライアントなど、JavaScript が実行されない環境で特に役立ちます。また、サーバーサイドでレンダリングされるウェブ コンポーネントでも重要です。
- 2024 年 2 月にリリース予定
- 2026 年 8 月に広く利用可能
詳しくは、宣言型 Shadow DOM をご覧ください。
Popover API
ポップアップは、ウェブ アプリケーションのさまざまなタスクに使用されます。たとえば、メニュー、カスタム トースト通知、コンテンツ選択ツールなどです。Popover API を使用して、これらのポップアップを装飾的な方法で作成する組み込み方法が導入されました。
- 2024 年 4 月にリリース予定
- 2026 年 10 月に広く利用可能
詳しくは、MDN の Popover API、ベースラインでの Popover API の導入、Popover のケーススタディをご覧ください。
これら 12 の機能は、新たに利用可能になったベースラインに含まれる機能のほんの一部です。詳細については、このサイトをご覧ください。Baseline 2023 に含まれるすべての機能と、Baseline 2024 に追加された機能のコレクションをご確認ください。