Chrome 150 の新機能

Rachel Andrew

公開日: 2026 年 6 月 30 日

Chrome 150 がリリースされました。この投稿では、このリリースの主な機能についてご紹介します。Chrome 150 のリリースノート全文をご覧ください。

このリリースのハイライト:

• CSS text-fit プロパティ は、包含ボックスに合わせてフォントサイズを調整します。
• Focusgroup は、ウェブ コンポーネントの宣言型矢印キー ナビゲーションを提供します。
• CSS background-clip: border-area を使用すると、グラデーション ボーダーをネイティブに作成できます。

CSS の text-fit プロパティ

text-fit プロパティは、テキスト ノードのフォントサイズを包含ボックスの幅に完全に収まるように調整します。

このプロパティを使用すると、見出しや動的コンテンツが、フォントサイズを手動で計算したり、複雑な JavaScript の回避策を使用したりすることなく、利用可能な水平スペースに収まるようにできます。さまざまな画面サイズで視覚的な配置を維持する、レスポンシブ タイポグラフィのための堅牢な CSS ネイティブ ソリューションを提供します。

Focusgroup

focusgroup 属性を使用すると、複合ウィジェットに矢印キー ナビゲーション、保証されたタブストップ、最後にフォーカスされたメモリを宣言的に指定できます。これにより、手動でコーディングされたロービング タブインデックス スクリプトを置き換えることができます。

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

CSS background-clip: border-area

CSS の background-clip プロパティに border-area 値を実装します。background-clip: border-area は、要素の背景をボーダー ストロークで描画された領域にクリップします。このとき、border-width と border-style は考慮されますが、border-color の透明度は無視されます。

これにより、border-image の回避策を使用せずに、CSS でグラデーション ボーダーを直接作成できます。

関連情報

ここでは、主なハイライトの一部のみを紹介しています。Chrome 150 のその他の変更については、以下のリンクをご覧ください。

• Chrome 150 のリリースノート。
• Chrome 150 の ChromeStatus.com の更新情報。
• Chrome のリリース カレンダー。

登録

最新情報を入手するには、Chrome Developers YouTube チャンネルに登録してください。新しい動画が公開されるたびに メール通知が届きます。また、X または LinkedIn で Google をフォローして、新しい記事やブログ投稿を入手することもできます。

Chrome 151 がリリースされたら、Chrome の新機能をお知らせします。