5 月にウェブ プラットフォームを導入

2026 年 5 月に安定版とベータ版のウェブブラウザに導入された興味深い機能をご紹介します。

Rachel Andrew

公開日: 2026 年 5 月 29 日

安定版ブラウザのリリース

Chrome 148、Firefox 151、Safari 26.5 が 5 月に安定版としてリリースされました。今回の投稿では、今月の多くの新機能についてご紹介します。

注: これらの投稿には、MDN から取得したブラウザの互換性データが含まれています。ごく最近のブラウザ リリースについては、まだ更新されていない可能性があります。投稿には、browser-compat-data リリースに表示され次第、正しい情報が表示されます。

:open CSS 疑似クラスが Baseline になる

Safari 26.5 は、主に既存の機能の修正リリースです。ただし、:open 疑似クラスのサポートも含まれているため、この機能は Baseline で新たに利用可能になります。

:open 疑似クラスを使用すると、要素が開いているときに「開いている」状態と「閉じている」状態のスタイルを設定できます。これは、<details> や <dialog> などの要素が開いている場合や、<select> や <input> などの要素（カラー ピッカーや日付ピッカーなど）のピッカー インターフェースが表示されている場合に適用されます。これにより、details[open] などの属性を使用したスタイリングに代わる、よりクリーンでセマンティックな方法が提供されます。

Browser Support

• 133
• 133
• 136
• 26.5

Source

CSS の名前のみのコンテナクエリがベースラインに

今月リリースされる Chrome 148 では、名前のみのコンテナクエリが Baseline Newly available になりました。

以前は、コンテナクエリを記述する際に、コンテナ名とともにサイズまたはスタイルクエリ条件を指定し、container-type プロパティでコンテナのタイプを確立する必要がありました。これで、追加の条件なしで、名前付きコンテナの存在を名前だけでクエリできるようになりました。また、名前でクエリする場合に、祖先に container-type を設定する必要がなくなりました。

#container {
  container-name: --sidebar;
}

@container --sidebar {
  .content {
    padding: 2rem;
  }
}

Browser Support

• 148
• 148
• 149
• 26.4

カスタム プロパティのコンテナ スタイル クエリがベースラインになる

Firefox 151 では、@container での style() クエリのサポートが導入され、カスタム プロパティのコンテナ スタイル クエリが Baseline で新たに利用可能になりました。

コンテナ スタイル クエリを使用すると、親コンテナの CSS プロパティに基づいて要素にスタイルを適用できます。サイズクエリは非常に強力ですが、スタイルクエリを使用すると、サイズ以外の機能をクエリできます。特に、このリリースでは、カスタム プロパティのクエリに対するクロスブラウザの完全なサポートが提供されます。たとえば、親コンテナでカスタム プロパティ --theme が dark に設定されているかどうかを確認できます。

@container style(--theme: dark) {
  .card {
    background-color: #1a1a1a;
    color: #fff;
  }
}

Browser Support

• 111
• 111
• 151
• 18

動画要素と音声要素の遅延読み込み

Chrome 148 では、loading="lazy" 属性を持つ <video> 要素と <audio> 要素のネイティブの遅延読み込みが導入されます。

<img> 要素や <iframe> 要素と同様に、メディア リソースがビューポートに近づくまで読み込みを遅らせるようブラウザに指示できるようになりました。これにより、ページの読み込みパフォーマンスが向上し、帯域幅が節約され、ユーザーのデータ使用量が削減されます。この機能を実装したチームによる記事、How To Use Standard HTML Video and Audio Lazy-Loading on the Web Today で詳細をご確認ください。

Browser Support

• 148
• 148
• x
• x

Source

ドキュメントのピクチャー イン ピクチャー API

Firefox 151 では、デスクトップ プラットフォームで Document Picture-in-Picture API のサポートが導入されました。

<video> 要素を常に最前面に表示するウィンドウで表示できる標準の Picture-in-Picture API とは異なり、Document Picture-in-Picture API では、任意の HTML コンテンツを含む常に最前面に表示するウィンドウを開くことができます。これにより、ビデオ会議の参加者グリッド、インタラクティブな株価ティッカー、ページから移動しても表示され続けるタイマーなどのリッチなインタラクティブ オーバーレイが可能になります。

Browser Support

• 116
• 116
• 151
• x

Source

Web Serial API のプラットフォーム サポートを拡大

Firefox 151 では、パソコン プラットフォームで Web Serial API のサポートが追加され、Chrome 148 では Android でのサポートが追加されました。

Web Serial API を使用すると、ウェブサイトでシリアル デバイス（マイクロコントローラ、3D プリンタ、開発ボード、周辺機器など）に対する読み取りと書き込みを実行できます。Firefox では、Web Serial API を使用するには、ユーザーが合成的に生成されたサイト権限アドオンをインストールする必要があります。これにより、アクセスを管理するための安全で制御されたメカニズムが確保されます。

Browser Support

• 89
• 89
• 151
• x

Source

ベータ版ブラウザのリリース

ブラウザのベータ版では、ブラウザの次の安定版で提供予定の機能をプレビューできます。この期間は、サイトに影響を与える可能性のある新機能や削除を、世界にリリースされる前にテストする絶好の機会です。今月の新しいベータ版は Chrome 149 と Firefox 152 です。今月は Safari ベータ版はありません。

Chrome 149 ベータ版には、CSS ギャップ装飾などのエキサイティングな CSS アップデートが含まれており、flex アイテムと grid アイテムの間の空白（ギャップ）をスタイル設定できます。また、shape-outside プロパティの path() と shape()、rect() と xywh() の基本形状関数、CSS プロパティとしての path-length もサポートしています。API 側では、scrollTo()、scrollBy()、scrollIntoView() などのプログラムによるスクロール メソッドが、スムーズ スクロールが完了したときに解決される Promise を返すようになり、アクティブな WebSocket 接続があるページが、前後のキャッシュ保存（BFCache）の対象となるようになりました。

Firefox 152 ベータ版では、field-sizing プロパティの完全なサポートが導入されました。これにより、フォーム コントロールのサイズをコンテンツに合わせて自動的に調整できます。また、Notification インターフェースに actions プロパティと maxActions プロパティを追加し、Element.getAnimations() で options.pseudoElement をサポートしています。