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

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

Rachel Andrew

公開日: 2026 年 6 月 30 日

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

Chrome 149、Chrome 150、Firefox 152 が 6 月に安定版としてリリースされました。今月は Safari の安定版リリースはありませんでした。この投稿では、ウェブブラウザに導入される新機能について説明します。

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

field-sizing を使用したフォーム コントロールのサイズ設定がベースラインになる

Firefox 152 では field-sizing CSS プロパティのサポートが導入され、フォーム コントロールの自動サイズ設定がすべての主要なブラウザ エンジンで新たに利用できるようになりました。

field-sizing プロパティを使用すると、<textarea>、<input>、<select> などのフォーム コントロールを、デフォルトのサイズ（field-sizing: fixed）で固定するのではなく、コンテンツ（field-sizing: content）に合わせて動的に縮小または拡大できます。これにより、ユーザーが入力するにつれてサイズが変更されるテキスト入力やテキストエリアを構築する際に、JavaScript の回避策が不要になります。

textarea {
  field-sizing: content;
}

Browser Support

• 123
• 123
• 152
• 26.2

Source

shape-outside の基本的な図形 rect() と xywh() がベースラインになる

Chrome 149 で shape-outside プロパティの rect() と xywh() のシェイプ関数がサポートされたため、これらの基本シェイプが主要なブラウザで新たに利用可能になりました。

rect() 関数と xywh() 関数を使用すると、正確なインセット座標または原点とディメンションの構文を使用して、長方形の浮動小数点除外領域を定義できます。これにより、長方形のフロート ラッピング図形に polygon() を使用するよりも、シンプルで読みやすい構文が提供されます。

Browser Support

• 149
• 149
• 149
• 17.2

Source

CSS text-fit によるフォントの自動スケーリング

Chrome 150 では text-fit CSS プロパティが導入され、デベロッパーはフォントサイズを自動的に拡大縮小して、コンテナ ボックスの幅に合わせることができます。

.headline {
  text-fit: grow;
}

CSS ギャップ装飾

Chrome 149 では、グリッド レイアウトと flexbox レイアウトで CSS のギャップ装飾がサポートされるようになりました。ギャップ装飾を使用すると、マルチカラム レイアウトの column-rule と同様に、グリッド アイテムとフレキシブル アイテムの間のスペースに直接線やスタイルを追加できます。

.grid-container {
  display: grid;
  gap: 20px;
  column-rule: 2px solid red;
  row-rule: 1px dashed gray;
}

詳しくは、ギャップ装飾: Chromium で利用可能にをご覧ください。

Browser Support

• 149
• 149
• x
• x

CSS background-clip: border-area

Chrome 150 では、CSS Backgrounds Level 4 の background-clip: border-area のサポートが追加されます。

この値は、要素の背景をボーダー領域にクリップします。これにより、追加のラッパー要素や疑似要素を必要とせずに、カスタム グラデーション ボーダー、装飾的なフレームの端、アニメーション ボーダー効果を作成できます。

Browser Support

• x
• x
• x
• 18.2

プログラマティック スクロール プロミス

Chrome 150 では、プログラムによるスクロール メソッド（scrollTo()、scrollBy()、scrollIntoView()）が更新され、Promise を返すようになります。

返された Promise は、スムーズ スクロール アニメーションが終了すると解決され、スクロールが完了した後にフォローアップ アクションをトリガーするための信頼性の高いシグナルを提供します。

focusgroup を使用した宣言型キーボード ナビゲーション

Chrome 150 では、focusgroup 属性のサポートが導入されています。

focusgroup 属性を使用すると、デベロッパーはキーボード イベント リスナーを手動で記述することなく、複合 UI コントロール（ツールバー、タブリスト、メニューなど）全体で矢印キー ナビゲーションを宣言的に管理できます。

<div focusgroup="toolbar wrap" aria-label="Text formatting">
  <button type="button">Bold</button>
  <button type="button">Italic</button>
  <button type="button">Underline</button>
</div>

詳しくは、フォーカス グループの説明をご覧ください。

バックフォワード キャッシュ（bfcache）で WebSocket がサポートされる

Chrome 149 では、アクティブな WebSocket 接続があるページをバックフォワード キャッシュ（bfcache）に保存できるようになりました。

以前は、WebSocket 接続が開いていると、ページはバックフォワード キャッシュの対象外になっていました。ブラウザは bfcache エントリ時にアクティブな WebSocket 接続を自動的に閉じ、ページをキャッシュに保存して、戻ったときにすぐに復元できるようにします。

Resource Timing の中間レスポンスとヘッダー レスポンスのタイミング

Firefox 152 では、PerformanceResourceTiming インターフェースで firstInterimResponseStart と finalResponseHeadersStart のサポートが追加されました。

これらを使用して、リクエストの送信後にブラウザが中間 HTTP レスポンスと最終 HTTP レスポンスをそれぞれ受信するのにかかる時間を測定できます。

Browser Support

• 115
• 115
• 152
• 26.4

Source

通知の操作ボタン

Firefox 152 では、Notification の actions プロパティと ServiceWorkerRegistration.showNotification() のオプションを使用して、通知の操作ボタンのサポートが追加されました。

OS 通知にアクション ボタンを含め、ボタンがタップされたときにユーザーの操作をリッスンできるようになりました。

Browser Support

• 53
• 18
• 152
• x

Source

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

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

Firefox 153 ベータ版では、キャプチャされたスタック トレースの最大深度を構成する Error.stackTraceLimit、インデックス付きレコードを取得する IDBObjectStore.getAllRecords() と IDBIndex.getAllRecords()、WebRTC セキュリティ検査の RTCDtlsTransport.getRemoteCertificates() のサポートが導入されています。アドオン デベロッパーは、オンデマンド スクリプト挿入用の新しい publicSuffix API と userScripts.execute() メソッドも利用できます。

Safari 27 ベータ版では、変換を認識するアンカー配置、見出し要素を照合するための :heading 疑似クラス、カスケード レイヤをロールバックするための revert-rule キーワード、ボックスサイズの stretch キーワードのサポート、:host:has() 複合セレクタが導入されています。