CSSの新機能が便利！ FlexboxやGridに罫線を実装したり、UIのシェイプなど、Chrome 149で新しく追加されたCSSの機能

Post on:2026年6月8日

sponsorsr

先週アップデートされたChrome 149に追加された、CSSとUIに関する新しい機能を紹介します。

今回のアップデートで注目すべき点は、たくさんあります！
まずはshape()がshape-outsideプロパティで動作するようになり、UIをシェイプできるようになりました。さらにCSS GridやFlexboxのギャップをスタイルできるようになり、コンテナ間に罫線などを簡単に実装できます。また、拡大縮小された画像をくっきり表示させたり、テーブルのデフォルトだったboder-color: gray;が削除されたなど、Web制作者は要チェックです！

New in Chrome 149
Chrome 149 beta

下記は各ポイントを意訳したものです。
※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。

はじめに
UAスタイルシートでtableに設定されていたgrayのボーダーを削除
shape-outsideプロパティでpath()とshape()をサポート
shape-outsideプロパティでrect()とxywh()をサポート
CSSによるアクセントカラーのスコープを制限
ユーザー操作によるテキストオーバーフローのクリップ
CSS GridやFlexboxでコンテナ間のギャップをスタイル設定
crisp-edgesで画像を拡大縮小してもくっきり表示させる
ユーザーアクションの擬似クラスによる最上位レイヤー境界
CSSのプロパティとしてpath-lengthをサポート

はじめに

6/3にリリースされたChrome 149で9つのCSSとUIに関する新しい機能が追加されました。対象となるChrome 149は、Android、ChromeOS、Linux、macOS、Windowsに適用されます。

以下、その9つの新しいCSSとUIに関する機能を紹介します。

UAスタイルシートでtableに設定されていたgrayのボーダーを削除

この変更により<table>要素のUAスタイルシートから誤ったCSSルール「boder-color: gray;」が削除されました。

HTMLの仕様にはこのCSSルールは含まれておらず、ボーダーがデフォルトでcurrentColorにならず、誤った結果が生じる原因になっていました。FirefoxもWebkitもUAスタイルシートにこのgrayのルールが含まれていないため、クロスブラウザの問題が生じていました。

参考:

shape-outsideプロパティでpath()とshape()をサポート

CSSのshape-outsideプロパティでpath()とshape()という形状関数のサポートを追加しました。この2つの関数を使用することで、デベロッパーは矩形座標を用いてフロート要素の除外形状を定義できるようになります。

上部のリロードアイコンをクリックして、さまざまな形状を試してみてください。

See the Pen
shape() in shape-outside by coliss (@coliss)
on CodePen.

shape-outsideプロパティでrect()とxywh()をサポート

CSSのshape-outsideプロパティで基本的な図形関数であるrect()とxywh()のサポートを追加しました。この2つの関数を使用することで、デベロッパーは矩形座標を用いてフロート要素の除外形状を定義できるようになります。これにより、Chromeはすでにこの機能をサポートしているFirefoxやSafariと同等の機能を提供します。

CSSによるアクセントカラーのスコープを制限

CSSのキーワードとaccent-color: auto;によるシステムアクセントカラーへのアクセスをWebアプリおよび初期プロファイルコンテキスト内に限定します。

CSSのキーワード（AccentColorおよびAccentColorText）は、ユーザーのシステムカラーをWeb上で広く公開する際に重大なフィンガープリンティングベクトルとなる可能性があります。そのため、これらのキーワードはインストール済みWebアプリのコンテキスト内でのみ利用可能です。

accent-color: auto;を設定したフォームコントロールもこのリリースに伴い、同様のスコープに準拠します。これにより、システムカラーに対するデベロッパーとユーザーの期待値がより一貫したものになり、AccentColor[Text]に対するフィンガープリンティングの制限とも整合します。

ユーザー操作によるテキストオーバーフローのクリップ

text-overflow: ellipsis;が設定されたテキストに対してユーザーが操作（編集やカーソル移動）すると、テキストは一時的に省略記号からクリップ表示に切り替わり、隠されていたオーバーフローコンテンツを表示・操作できるようになりました。

この機能は、編集可能な要素と編集不可能な要素のすべてに適用されます。フォームコントロール（textarea, input）については、すでにこの動作がサポートされています。

CSS GridやFlexboxでコンテナ間のギャップをスタイル設定

CSSのgapをスタイル設定すると、CSS GridやFlexboxなどのコンテナレイアウトにおけるギャップ（スペース）を複数列レイアウトのcolumn-ruleと同様にスタイルを設定できます。この機能は現在、CSS GridやFlexboxのレイアウトのギャップをスタイル設定するためにさまざまなハックを使用せざるを得ないデベロッパーから強く要望されていました。

CSS GridやFlexboxでアイテム間のスペース（ギャップ）をスタイル設定するCSSの新しいテクニック

crisp-edgesで画像を拡大縮小してもくっきり表示させる

image-rendering: crisp-edges;を使用すると、コントラストとエッジを保持しながら画像を拡大縮小することができ、その過程で色の平滑化や画像のぼやけが生じないようにします。

ユーザーアクションの擬似クラスによる最上位レイヤー境界

この機能はCSS Selectors Level 4で規定されている動作を反映したものです。この仕様では:hover, :active, :focus-withinは要素の親要素に対してマッチしますが、親要素チェーンの最初の最上位レイヤー要素までしかマッチしないとされています。

Chromiumでは、最上位レイヤー要素に対してこの制限を実装しました。具体的には以下の構造において、ユーザーが<button>にカーソルを合わせた場合、:hover<button>とポップオーバーにはマッチしますが、<main>要素にはマッチしません。

<main>
  <div popover>
    <button></button>
  </div>
</main>
<script>document.querySelector('[popover]').showPopover();</script>

<main>

</div>

</main>

この変更の背景には、通常、最上位レイヤーの要素は親要素から視覚的に切り離された「別の場所」でレンダリングされるという点にあります。そのため、たとえば最上位レイヤーの要素にマウスオーバーしたり、アクティブにしたりした際に、親要素のスタイルを変更することは意味がありません。

Chromiumに搭載されているカスタマイズ可能なselect要素の実装では、::picker()のポップオーバーという特定のケースに対して、このロジックがハードコーディングされていました。今回の変更により、この特殊なケースのロジックは削除され、より一般的な動作が採用されるようになりました。

CSSのプロパティとしてpath-lengthをサポート

この変更により、既存のSVG表示属性であるpathLengthに対応するCSSの新しいプロパティpath-lengthが導入されました。これはpathLengthをサポートするSVGジオメトリ要素（<path>, <circle>, <rect>, <line>, <polyline>, <polygon>, <ellipse>）に適用されます。

pathLengthをCSSのプロパティとして公開することで、デベロッパーはスタイルシート、インラインスタイルのアニメーション内でこれを設定できるようになり、通常のCSSカスケード、詳細度、トランジション、アニメーションの対象となります。このプロパティはストロークの破線レンダリングや<textPath>に沿ったテキスト配置など、パスの全長に依存するすべての計算に影響します。

CSS宣言は標準的なCSSの優先順位ルールに従って、presentation属性よりも優先されます。path-lengthの初期値はnoneで、これはデベロッパーがパス長を設定していないことを表し、0などの明示的な数値とは異なります。

この機能が無効化されている場合、既存の属性のみの動作は維持されます。