Chromeの安定版で、待ちに待った縦方向のタブをサポート！ グループ化・アイコン化・分割化と併用するとさらに便利、Chrome 157で新しく追加された6つの機能

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

今回のアップデートで注目すべきは、待望の縦方向のタブのサポートです。今年の初めから段階的にサポートされており、ようやく安定版での実装です。また、通常通りCSSで追加された機能もあり、Web制作者は要チェックです！

Chrome 157 Release Notes

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

• はじめに
• 縦方向のタブに対応
• corner-*プロパティのショートハンド
• position-visibilityプロパティのanchor-valid値
• text-decoration-insetプロパティ
• text-overflowプロパティの<string>値
• anchor-visibleとanchor-valid

はじめに

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

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

縦方向のタブに対応

縦方向のタブの当ブログの第1報は今年の1月（紹介記事）、以降段階的にサポートされ、ようやくChrome 157の安定版でサポートされました。

タブを縦方向に表示するのは簡単で、タブを右クリックして「タブを縦方向に表示」を選択するだけです。

右クリックして「タブを縦方向に表示」

これでタブが縦方向に表示されます。

タブを縦方向に表示

縦方向に表示するだけではスペースの無駄遣いのように見えますが、この縦方向はタブのグループ化やアイコン化を併用するとその威力を発揮します。

タブのグループ化

表示領域を広くしたいときやアイコンで判断できるのであれば、アイコン化するとさらに便利です。ウインドウを2つ並べて表示する人は、タブの分割を使うとさらに便利です。

タブのアイコン化

corner-*プロパティのショートハンド

CSSのcorner-*プロパティで各角に対応するショートハンド（corner-top-left, corner-top-right, corner-bottom-left, corner-bottom-right）が実装されました。さらに物理的なショートハンドの（corner-top, corner-bottom）も実装されました。

これまでは角の半径と形状の両方を設定するには、2つの宣言（border-radiusとcorner-shape）が必要でした。これからは、各角に対してborder-radiusとcorner-shapeの両方を一度の宣言で設定できるようになります。この2つのプロパティを組み合わせたショートハンドを利用することで、コーナーのスタイル設定がより使いやすくなります。また、cornersもcornerショートハンドの互換用エイリアスとして維持されます。

デモページでは、corner-*プロパティを使用したさまざまな実装を楽しめます。

デモページ

position-visibilityプロパティのanchor-valid値

anchors-validという値は、https://crbug.com/329703412に基づいて実装されましたが、仕様上に問題が生じたため取り消されました。

その後、この値はanchor-validに名称が変更され、デフォルトのアンカーのみが考慮対象になることが明確に定義さました。この名称変更により、曖昧さが解消され、実装をリリース可能な状態になりました。

position-visibilityの値にanchor-validを設定すると、ボックスがデフォルトのアンカーボックスを参照しているにもかかわらず、そのデフォルトのアンカーボックスを解決できない場合、ボックスのvisibilityプロパティはforce-hiddenと算出されます。

text-decoration-insetプロパティ

CSSのtext-decoration-insetプロパティは、下線・上線・取り消し線などの装飾をテキストの端からどれだけ内側に配置するか、または外側に配置するかを設定します。値にはauto, length, パーセント値をサポートしており、開始オフセットと終了オフセットを設定するための1値構文と2値構文も使用できます。

このプロパティを使用することで、デベロッパーはテキスト装飾の間隔を調整したり、背景グラデーションや追加要素なしで、ネイティブのテキスト装飾を使用して表示効果を実装できます。

デモページでは、text-decoration-insetプロパティを使用したさまざまなテキスト装飾を楽しめます。

デモページ

text-overflowプロパティの<string>値

CSSのtext-overflowプロパティに<string>値が追加されました。

これまではtext-overflowプロパティではclipとellipsisのキーワードしかサポートされていなかったため、テキストの切り詰め表示を使いたい場合はJavaScriptでテキストを切り捨てるか、行末に擬似要素を配置する必要がありました。

<string>値のサポートによりデベロッパーはテキストが切り詰められていることを示す任意の文字列（例: ...など）を設定できるようになります。この機能はデザインの柔軟性を高め、よりユーザーフレンドリーに文脈に応じたオーバーフロー表示を実装するのに役立ちます。

anchor-visibleとanchor-valid

CSSWGは、anchors-validをanchor-validに、anchors-visibleをanchor-visibleに改名することを決定しました（GitHub, GitHub）。

この改名に伴い、各プロパティを単数形の名称に変更し、複数形の名称から単数形の名称へのエイリアスを追加します。複数形の名称（古いバージョン）は将来的に削除する予定です。