ウェブの新機能

Rachel Andrew

公開日: 2025 年 5 月 20 日

Google I/O 2025 のウェブの新機能に関する基調講演では、Baseline に関するすべての発表が行われ、今年 Baseline に追加された機能の一部が紹介されました。ウェブにとって素晴らしい 1 年でした。この投稿では、Baseline で言及されたすべての内容をまとめ、詳細を確認するためのリンクをすべて掲載しています。

Web Platform Dashboard と web-features

2024 年に、ウェブ機能データセットを使用する Web Platform Dashboard の初回リリースを発表しました。これにより、Baseline に含まれるすべての機能を調べることができます。

ウェブ機能データが完成し、プラットフォームのすべての機能がマッピングされました。毎月新しい機能が Baseline に追加されると、データが更新され、そのすべてがダッシュボードに表示されます。

独自のベースライン ターゲットを見つけるためのツール

ブラウザ サポート ポリシーは、英国の代理店 Clearleft のように、Baseline Widely available の変動するターゲットに基づいて作成できますが、Baseline の年次に基づいて固定ターゲットを採用することもできます。ウェブ機能のデータと独自のユーザーデータを組み合わせて、最適なターゲットを特定できるようになりました。

昨年の I/O で、RUMvision がプロダクトに Baseline を実装することを発表しましたが、この統合が実現しました。

RUM データを使用するため、グローバル平均ではなく、そのデータに基づいてどの基準年を採用するかを特定できます。また、Baseline Widely available が自分にとって適切かどうかを判断するのにも役立ちます。

また、新しい Google アナリティクス ベースライン チェッカーを使用すると、Google アナリティクスのデータに基づいて、各ベースライン ターゲットをサポートしているユーザーの割合を明確に確認できます。

サポートされている割合を含むベースライン年のリスト。
Google アナリティクス ベースライン チェッカーの出力。

これらは、実際のユーザーデータを Baseline にマッピングするのに役立つツール群のほんの一部です。

Web DX Community Group は最近、さまざまな Baseline 年と Widely available のサポートをサイトに表示する Netlify の拡張機能をリリースしました。この拡張機能は、ビルドツールでターゲットにするものを決定するのに役立ちます。Cloudflare の Observatory RUM プロダクトや Contentsquare との統合も近日中に提供予定です。

データを独自のツールと統合する

ウェブ機能のデータは公開されており、独自の統合に使用できます。Google は、この作業をより簡単に行えるように取り組んでいます。

Web Platform Dashboard API を使用するか、npm パッケージから web-features データを直接使用します。

W3C WebDX Community Group の baseline-browser-mapping モジュールを使用して、ブラウザのバージョンをベースライン ターゲットにマッピングできるようになりました。このモジュールは、サーバーサイドの JavaScript 環境で使用することも、リポジトリから毎日更新される JSON ファイルまたは CSV ファイルをダウンロードして使用することもできます。

このデータには、コアの Baseline ブラウザ セットだけでなく、Samsung Internet、Opera、UC Browser、Android Webview などのダウンストリーム ブラウザのマッピングも含まれています。

機能がベースライン ターゲットでサポートされているかどうかを確認する

ベースライン情報は、MDN と Can I Use のほとんどのページに記載されています。また、Web Platform Dashboard、web.dev と CSS Tricks の記事にも記載されています。ただし、これらすべてでサポートを調べる必要があります。コードの作成時に IDE で Baseline 情報を表示したり、使用する他のすべてのツールの一部として表示したりする方がはるかに便利です。

多くの主要なツールで、Baseline のサポートが組み込まれるか、簡単に統合できるようになりました。

browserslist-config-baseline

Babel や PostCSS などの多くのツールは、browserslist を使用してサポートするブラウザを決定します。

Chrome チームは、WebDX CG とコミュニティ メンバーとともに、browserslist-config-baseline という新しいツールをリリースしました。これにより、広く利用可能であるか、ベースラインの年数など、ベースラインの用語で browserslist ターゲットを構成できます。

これにより、browserslist ターゲットを受け取るツールを Baseline で表現できるようになりました。

詳しくは、ブラウザリストで Baseline を使用するをご覧ください。

リンターのベースライン - ESLint と Stylelint

最近、リンターの分野でいくつかの新しいツールが登場し、CSS 用の ESLint を皮切りに、リンターで Baseline を使用できるようになりました。

ベースライン ESLint には use-baseline ルールがあります。これを希望するベースライン ターゲットに設定すると、ターゲットよりも新しい機能を使用する際に警告が表示されます。これらの警告を解決する方法は、その機能をプリミティブに置き換えるか、リンターの警告を抑制するかのいずれかを選択できます。たとえば、プログレッシブ エンハンスメントなど、最先端の機能を安全に使用していることがわかっている場合は、リンターの警告を抑制するのが妥当な解決策です。

デフォルトでは、サポートされていないブラウザでは評価されないため、@supports ブロック内で新しい機能が使用されていても、ESLint は警告しません。

HTML の linting には、html-eslint というコミュニティ プラグインもあります。

Stylelint は、stylelint-plugin-use-baseline というプラグインを公式にサポートしています。このルールは CSS の ESLint ルールと同じように動作しますが、Stylelint で実行されます。

多くのリンターには IDE プラグインもあります。そのため、コードの作成中に、波線でベースラインのステータスに関するフィードバックをすぐに受け取ることができます。

VSCode で使用されている ESLint プラグイン。ベースライン ターゲット外の機能に下線が表示されている。
VSCode で使用される ESLint プラグイン。

VS Code と JetBrains WebStorm のベースライン

多くの IDE では、エディタで機能にカーソルを合わせると、サポートされているブラウザのバージョンのリストが表示される機能が長年サポートされています。

しかし、その機能が実際に安全に使用できるかどうかを理解するのはかなり難しい場合があります。そのリストに主要なブラウザが欠落していないかどうか、そのブラウザのバージョンがどれほど新しいかを、頭の中で解析する必要があります。

この問題を解決するため、Google は数百万人のウェブ デベロッパーが使用する最も人気のある IDE である VS Code と提携し、これらのホバーカードに Baseline データを直接統合しました。

機能にカーソルを合わせると、その機能がベースラインと見なされるかどうか、ベースラインと見なされる期間、またはまだ完全に実装していない主要なブラウザがあるかどうかが表示されます。

VS Code のホバーカードにベースラインのステータスが表示されている。
VSCode ホバーカードの統合。

サポートされている機能には、CSS プロパティ、HTML 要素、HTML 属性などがあります。詳しくは、Visual Studio Code で Baseline がサポートされるようになりましたをご覧ください。

この統合により、VS Code ベースの IDE もこれらのホバーカードのメリットを享受できます。

また、JetBrains が WebStorm JavaScript および TypeScript IDE にホバーカードを実装することも発表いたします。

WebStorm のホバーカード統合。

ウェブはかつてないスピードで進化しています

Baseline を活用して、相互運用可能なウェブがかつてないスピードで進化しているという事実を最大限に活用していただければ幸いです。

ウェブ プラットフォーム ダッシュボードを使用すると、Google I/O 2024 以降の過去 12 か月間で新たに Baseline になったすべての機能を確認できます。

Interop 2025 プロジェクトに含まれているため、まもなく Baseline で新たに利用可能になることが確実な機能も多数あります。含まれるすべての機能については、Interop2025: ウェブ プラットフォームの改善のもう 1 年をご覧ください。

横書きモード

Browser Support

  • Chrome: 132.
  • Edge: 132.
  • Firefox: 43.
  • Safari: 18.4.

CSS の writing-mode プロパティの sideways-rl 値と sideways-lr 値という 1 つの機能が、すでに Baseline Newly available になっています。レイアウトのみを目的として縦書きモードを使用している場合は、横向きの値を使用することをおすすめします。

h1 {
  writing-mode: sideways-rl;
}

h2 {
  writing-mode: sideways-lr;
}

アンカーの配置

Browser Support

  • Chrome: 125.
  • Edge: 125.
  • Firefox Technology Preview: supported.
  • Safari: 26.

Source

アンカーの配置は Chrome 125 でリリースされました。たとえば、ボタンでツールチップを開くときに、要素の位置をアンカーに関連付けることができます。

Interop 2025 に含まれるようになったため、今年中に Baseline に追加されるはずです。

Core Web Vitals: LCP と INP

LCP API

Browser Support

  • Chrome: 77.
  • Edge: 79.
  • Firefox: 122.
  • Safari: not supported.

Source

イベント タイミング API（INP 用）

Browser Support

  • Chrome: 96.
  • Edge: 96.
  • Firefox: 144.
  • Safari: not supported.

Source

Web Vitals は、サイトのエクスペリエンスを数値化し、改善の機会を特定するのに役立ちます。ウェブ バイタル イニシアチブは、状況を簡素化し、サイトが最も重要な指標であるウェブに関する主な指標に集中できるようにすることを目的としています。

Interop 2025 には、ブラウザ間で LargestContentfulPaint API と Event Timing API を実装することで、Largest Contentful Paint（LCP）と Interaction to Next Paint（INP）の指標が含まれています。

<details> 要素の機能強化

<details> 要素自体はすでに Baseline Widely で利用可能です。<details> を使用した開示ウィジェットをより便利にする機能が多数あるため、Interop 2025 に含まれています。

<details> 要素には <summary> 要素が含まれています。これは、<details> 要素が折りたたまれたときにページに表示される部分です。<summary> の外側は <details> 要素のコンテンツです。これは、ユーザーが概要をクリックするまで非表示になっています。

Interop 2025 で相互運用可能になることの 1 つは、display ではなく content-visibility を使用してコンテンツを非表示にすることです。つまり、展開しないとコンテンツがまったくレンダリングされません。

Interop 2025 の取り組みには、::marker 疑似要素も含まれています。::marker 疑似要素を使用すると、<summary> 要素の開閉用三角形のスタイルを設定できます。

Browser Support

  • Chrome: 89.
  • Edge: 89.
  • Firefox: 49.
  • Safari: not supported. 

summary::marker {
  content: "+ ";
  font-family: monospace;
  color: red;
  font-weight: bold;
}

次に、別の疑似要素 ::details-content。

Browser Support

  • Chrome: 131.
  • Edge: 131.
  • Firefox: 143.
  • Safari: 18.4.

Source

::details-content はコンテンツを表します。これは、展開と折りたたみが可能な details 要素の一部であり、スタイルを設定できます。

[open]::details-content {
  border: 5px dashed hotpink;
}

また、ページ内検索で一致した <details> 要素を自動的に展開したり、HTML hidden 属性の until-found 値を Baseline Newly available に追加したりするなどの改善も行われています。この属性は、ブラウザのページ内検索で要素が見つかるか、URL フラグメントをたどって要素に直接移動するまで、要素を非表示にします。

CSS @scope

Browser Support

  • Chrome: 118.
  • Edge: 118.
  • Firefox: behind a flag.
  • Safari: 17.4.

Source

CSS の @scope ルールを使用すると、セレクタのリーチを制限できます。@scope でスコープ ルートを設定すると、@ 規則内にネストされたスタイルルールは、その DOM ツリーにのみ適用されます。

たとえば、クラス .card の要素内の <img> 要素のみをターゲットにする場合は、.card がスコープ設定のルートになります。

@scope (.card) {
    img {
        border-color: green;
    }
}

詳しくは、CSS の @scope at-rule を使用してセレクタの範囲を制限するをご覧ください。

scrollend

Browser Support

  • Chrome: 114.
  • Edge: 114.
  • Firefox: 109.
  • Safari Technology Preview: supported.

Source

複雑さを軽減し、スクロール インターフェースを改善するもう 1 つの機能は scrollend です。scrollend イベントがないと、スクロールが完了したことを確実に検出する方法がありません。

// before scrollend
document.onscroll = event => {
  clearTimeout(window.scrollEndTimer)
  window.scrollEndTimer = setTimeout(callback, 100)
}

scrollend イベントを使用すると、ブラウザがこの難しい評価をすべて行ってくれます。

document.onscrollend = event => {…}

その他の例については、Scrollend, a new JavaScript event をご覧ください。

同じドキュメント内のビューの切り替え

Browser Support

  • Chrome: 111.
  • Edge: 111.
  • Firefox: 144.
  • Safari: 18.

Source

最後に、ビューの切り替えは Interop 2025 の一部です。この作業には、シングルページ アプリ用の同じドキュメントのビュー遷移と、ビュー遷移クラスが含まれます。

Interop 2025 ダッシュボードで、プロジェクトの進捗状況をご確認ください。

Interop 2025 に含まれる機能は、今年 Baseline に含まれる唯一の機能ではありませんが、プロジェクトに含まれていることは、それらが優先順位の高い機能であり、まもなくリリースされることを示す良い兆候です。

まだ始まったばかりです

Baseline にとってエキサイティングな 1 年でした。昨年発表した内容から大きく進歩しました。ウェブ機能データのバックフィルが完了しました。これにより、デベロッパー ツールを作成できるようになりました。この取り組みはまだ始まったばかりです。このデータを含めることでメリットが得られるプロダクトやオープンソース ツールをお持ちの場合は、ぜひご連絡ください。

web.dev をチェックしてください。ウェブのあらゆる機能を活用できるよう、新しいツールに関するお知らせやチュートリアルを今後も公開していきます。