Web制作者は要チェック！ Chrome 133で新しく追加された7つのCSSの機能

Chrome 133で追加された、CSSの新しい機能7つを紹介します。
今回のアップデートで目玉となるのはattr()関数のパワーアップ、新しい疑似クラス:open、スクロール状態のコンテナクエリ、テキストの垂直方向の整形を細かく制御できるtext-box-trimなど、Web制作者は要チェックです！

【注意】Chrome 133は2/5にリリースされましたが、2/12に深刻度「高」の脆弱性を修正したChrome 133.0.6943.98/.99がリリースされたので、未の人はアップデートすることをお勧めします。

New in Chrome 133
Chrome 133 beta

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

• はじめに
• CSSのattr()関数がパワーアップ
• CSSの:open疑似クラス
• CSS スクロール状態のコンテナクエリ
• CSSによるテキストボックスのトリム
• popover属性のhint値
• ポップオーバーの呼び出し元とアンカー位置の改善
• 呼び出し元内にネストされたポップオーバーは再呼び出しされない

はじめに

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

以下、その8つの新しいCSSの機能を紹介します。

CSSのattr()関数がパワーアップ

Chrome 133では、CSS Values and Units Module Level 5で策定されたattr()関数の機能拡張をサポートしました。

これまではcontentプロパティのみでしたが、CSSのあらゆるプロパティで<string>以外の型で使用することができます。使い方は簡単、データ型を指定するだけ今までと同じように使用できです。また、必要に応じてフォールバック値も設定できます。

たとえば、下記のようにwidthの値をHTMLから取得することもできます。

60pxは、フォールバック値です。

詳しくは、先日の記事をご覧ください。

CSSのattr()関数がパワーアップ！ また一つJavaScriptでしかできなかったことがCSSだけでできるになります

CSSの:open疑似クラス

CSSの新しい疑似クラス:openは、dialogとdetailsが開いている状態の場合に一致します。また、selectやinputもピッカーが表示されている場合に一致します。

CSS スクロール状態のコンテナクエリ

コンテナクエリを使用して、スクロール状態に基づいてコンテナの子孫をスタイル設定します。

クエリコンテナは、スクロールコンテナまたはスクロールコンテナのスクロール位置によって影響される要素です。以下の状態をクエリできます。

• stuck: 固定配置されたコンテナがスクロールボックスの端に固定されている。
• snapped: スクロールスナップで配置されたコンテナが水平・垂直にスナップされている。
• scrollable: スクロールコンテナが照会された方向にスクロールできるかどうか。

新しくできたcontainer-type: scroll-state;を使用すると、コンテナを照会できます。

詳しくは、CSS scroll-state()をご覧ください。

CSSによるテキストボックスのトリム

テキストコンテンツで最適なバランスを実現するために、text-box-trim, text-box-edge, text-boxのプロパティを使用すると、テキストの垂直方向の整列をより細かく制御することを可能にします。

text-box-trimプロパティはテキストの上下を、text-box-edgeプロパティはエッジをどのようにトリムするかを設定できます。

これらのプロパティを使用すると、フォントのメトリクスを使用して垂直方向のスペースを正確に制御することができます。詳しくは、CSS text-box-trimをご覧ください。

CSS text-box-trim

popover属性のhint値

Popover APIは、popover属性に2つの値（autoとmanual）を設定できました。そして3つ目の値として、hint値が利用できます。hintはツールチップの動作に関連付けされますが、動作がすこし異なります。主にネストされたポップオーバーのスタックを開くときに、hintはautoに従属します。そのため、既存の自動ポップオーバ－のスタックを開いたまま、無関係のhintポップオーバーを開くことができます。

たとえば典型的な例として、selectピッカーが開いていて（popover=auto）、ホバーによってトリガーされるツールチップ（popover=hint）が表示されることです。このアクションでは、selectピッカーを閉じることはできません。

ポップオーバーの呼び出し元とアンカー位置の改善

popover.showPopover({source})を使用して、ポップオーバー間の呼び出し元の関係を設定するための命令形を追加しました。呼び出し元の関係を有効にし、暗黙的なアンカー要素参照を作成できるようになります。

呼び出し元内にネストされたポップオーバーは再呼び出しされない

下記のHTMLでは、ボタンをクリックするとポップオーバーは正常にアクティブになりますが、その後ポップオーバー自体をクリックしてもポップオーバーを閉じることはできません。

これまでは、ポップオーバーのクリックがbuttonで呼び出し元をアクティブにし、ポップオーバーが閉じられるようになるため、このような現象が発生していました。これからは、期待される動作に変更されます。