Chromeの安定版でついにタブの分割がサポートされました！ Chrome 145で新しく追加された6個のCSSとUIの機能

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

今回のアップデートで注目すべきは、まずタブの分割が正式サポートされたこと。そしてテキストの配置方法を制御するtext-justifyプロパティ、border-radiusのレンダリング変更、letter-spacingの%値、マルチカラムレイアウトにおける列の折り返しなど、Web制作者は要チェックです！

New in Chrome 145
Chrome 145 beta

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

• はじめに
• タブの分割
• text-justifyプロパティ
• border-radiusの値が大きい場合のシャドウエッジ計算を最適化
• CSS マルチカラムレイアウトにおける列の折り返し
• letter-spacingとword-spacingのパーセント値
• カスタマイズが可能なセレクトリスト

はじめに

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

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

タブの分割

先日の記事でお知らせしたタブの分割表示が安定版でサポートされました。これまではEdgeやZenなどの一部のブラウザのみが分割表示をできましたが、これからはChromeでもタブを分割表示できます。

Chrome 145でサポートされたタブの分割表示

タブが分割できることで、1つのタブでマルチタスクを行えるようになり、2つのサイトを並べて表示するために新しくウインドウを開く必要はなりなります。ChatGPTを開きながら作業するときとかに便利ですね。

タブは分割されたビューのサイズを変更したり、左と右のビューを入れ替えたり、分割ビューから別の分割ビューに新しいリンクを開いたり、分割されたビューを個別のタブに戻したりもできます。アドレスバーには操作している方のページURLが表示され、タブ自体には2つのタイトルが表示されます。

タブを分割表示するのは、簡単です。
まずは、通常通りにWebページを表示します。

2026年のトレンドカラーはあらゆる色彩を輝かせる繊細なホワイト「クラウド ダンサー」、HTMLのコードは「#F0EEE9」

タブを右クリックして「新しい分割ビューにタブを追加」を選択するだけです。また、タブをドラッグして左端（または右端）に移動すると分割ビューに表示されます。

「新しい分割ビューにタブを追加」を選択
※ベータ版では「ビュー」が「表示」になっていましたね。

これでタブを分割表示できます。

タブの分割表示

Chrome 145でタブの分割がサポートされたので、次は垂直タブですね。

Chromeのタブが垂直に表示できるようになります -Vertical Tabs

text-justifyプロパティ

デベロッパーは、text-align: justify;が適用された際のテキストの配置方法をtext-justifyプロパティで制御できます。たとえば、英語であれば単語区切りのスペースを広げたり、日本語であれば文字単位のスペースを広げることができます。

text-justifyプロパティには、以下の値が用意されています。

• none: 位置合わせは無効になります（デフォルト）。
• inter-word: 単語区切りのスペースを調整します。英語などのスペースで単語を区切る言語に適しています。
• inter-character: 隣接する文字単位間のスペースを調整します。日本語などの東アジア言語に適しています。

border-radiusの値が大きい場合のシャドウエッジ計算を最適化

この改善により、円形に近い要素（border-radiusが50%に近い要素）のシャドウとクリップ境界が、曲線エッジの視覚的な輪郭と正確に一致するようになります。

これにより複雑な丸みを帯びた形状のレンダリングがより一貫性のあるものになり、半径値が大きい場合の視覚的な不一致が解消されます。半径値が小さい場合には角がシャープに見えるようにするborder-radius調整係数は、半径値が50%に近づくにつれて段階的に減算されるようになりました。

これは非円形輪郭（corner-shapeを使用）にも適用され、同じ半径調整メカニズムを使用されます。

CSS マルチカラムレイアウトにおける列の折り返し

Chrome 145+では、マルチカラムレイアウトでcolumn-wrapプロパティとcolumn-heightプロパティがサポートされました。この2つのプロパティを使用すると、ブロック方向に列を折り返して新しい行に表示できます。

マルチカラムコンテナの高さが制限されている場合、利用可能なスペースに収まらないコンテンツはインライン方向にオーバーフローカラムとして表示されていました。そして、これにより水平スクロールバーが表示されてしまいました。しかし、column-wrapプロパティとcolumn-heightプロパティを使用すれば、カラムの行の高さを設定し、オーバーフローカラムを新しい行として表示させることが可能です。

実際の動作は、デモページでご覧ください。

See the Pen
Multicol level 2: inline overflow by coliss (@coliss)
on CodePen.

See the Pen
Multicol level 2: block direction overflow by coliss (@coliss)
on CodePen.

letter-spacingとword-spacingのパーセント値

CSS Text Module Level 4で定義されているとおり、letter-spacingとword-spacingプロパティでパーセントの値を設定できるようなりました。パーセント値はスペース文字（U+0020）の有効範囲を基準に計算されます。

これは特にテキストのスペースを異なるビューポートやフォントサイズに適用させる必要があるレスポンシブデザインにおいて、タイポグラフィをより堅牢かつ柔軟に設定できるようになります。

カスタマイズが可能なセレクトリスト

この機能はセレクトリストの単一および複数選択を含む、カスタマイズ可能なセレクトのサポートをリストボックスレンダリングモードに拡張します。

リストボックスレンダリングモードとは、select要素が独立したボタンとポップアップではなく、フロー内またはページ内にレンダリングされることを意味します。リストボックスレンダリングモードは<select multiple>やselect size=4>のようにmultiple属性またはsize属性によってプラットフォームを問わず選択できます。これらの属性が設定されたselect要素にappearance:base-select;を適用すると、レンダリングと入力の動作が改善されます。

この機能は、複数選択ポップアップのカスタマイズ可能な選択をサポートしていません（後日対応予定）。複数選択ポップアップを表示するには、<select multiple size=1>のように属性を設定する必要があります。