今回はCSSのアップデートが盛りだくさん！ Chrome 150で新しく追加された18個のCSSの機能

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

今回はかなりの数のアップデートがされており、さまざまなCSSのプロパティや関数に便利な機能が追加されています。Web制作者は要チェックです！

New in Chrome 150
Chrome 150 beta

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

• はじめに
• AccentColorとAccentColorText
• polygon()関数に角丸パラメータを追加
• ズームのアニメーションが可能に
• CSSのURLリクエスト修飾子
• CSSのtext-fitプロパティ
• CSSのbackground-clip: border-area;
• CSSのimage()関数
• 画像関連の値に対応したCSSのlight-dark()関数
• すべての子孫要素であるselectedcontent要素にクローンを作成
• コンテナクエリでカンマ区切りをサポート
• 印刷不可領域をCSSで指定する
• CSSのfocusgroup属性
• メディア要素の擬似クラス
• popover=hintのビヘイビアが変更されます
• 相対アルファカラー
• CSSのflex-wrap: balance;
• CSSの@supportsにおけるnamed-feature()関数
• CSSのoverscroll-behavior: chain;

はじめに

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

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

AccentColorとAccentColorText

CSSで、AccentColorおよびAccentColorTextのシステムカラーを使用すると、ユーザーのデバイスに設定されているシステムアクセントカラーを取得できます。

この機能により、デベロッパーはインストール済みのWebアプリなど、ユーザーがOSのテーマとの統合を期待するコンテキストにおいて、Webコンテンツにアプリのようなスタイルを適用できるようになります。システムのアクセントカラーが正しく表示されるには、ユーザーが初期プロファイルでインストール済みのWebアプリを利用している必要があります。

polygon()関数に角丸パラメータを追加

CSSのシェイプ関数polygon()に、オプションとして角丸のパラメータを設定できるようになります。デベロッパーはベジェ曲線を手動で計算することなく、長さの値を設定することで多角形の角を丸めることができます。

ズームのアニメーションが可能に

CSSのzoomプロパティはアニメーション化が可能になり、<number>として補間されます。デベロッパーはズームのトランジションやアニメーションを設定することで、要素やレイアウトをスムーズに拡大縮小ができるようになり、既存のtransformに基づくスケーリングを補完します。

CSSのURLリクエスト修飾子

CSSのurl()は引用符で囲まれたURL文字列の後に、cross-origin(), integrity(), referrer-policy() といったオプションのリクエスト修飾子を設定できます。これらの修飾子を使用することで、HTMLマークアップやJavaScriptを変更することなく、CSSから直接参照リソースの取得動作を制御できます。

たとえば、background-image: url("image.png" cross-origin(anonymous)); と設定すると、CORS匿名モードを使用して画像を取得できます。

CSSのtext-fitプロパティ

CSSのtext-fitプロパティを使用すると、テキストノードのフォントサイズをその親ボックスの幅にぴったり合うように調整できます。

デベロッパーは手動によるフォントサイズの計算やJavaScriptによる複雑な回避策を講じる必要はなく、見出しや動的コンテンツを利用可能な水平スペースいっぱいに表示させることができます。

このプロパティはさまざまなスクリーンサイズやテキストの長さに関わらず、視覚的な配置を維持し、レスポンシブ対応のタイポグラフィとして堅牢なCSSネイティブのソリューションを提供します。

See the Pen
The text-fit property by coliss (@coliss)
on CodePen.

CSSのbackground-clip: border-area;

CSS Backgrounds Module Level 4で定義されているbackground-clipプロパティのborder-area値をサポートしました。

boder-area値は、border-widthおよびborder-styleを考慮しつつ、border-colorによる透明度は無視して、要素の背景をその境界線の描画領域に合わせて切り取ります。この値を設定すると、border-imageを使用せずにグラデーションのボーダーも実装できます。

CSSのimage()関数

CSSのimage()関数を使用すると、デベロッパーは任意の色から単色画像を生成できます。構文は次のとおりです。

画像関連の値に対応したCSSのlight-dark()関数

CSSのlight-dark()関数の機能を拡張し、スタイルシート内でurl(), image-set(), noneなどを画像関連の値として受け入れるようにしました。

これにより、background-image, list-style-image, border-image-source, cursor, contentといった画像プロパティでユーザーの好みの配色に基づいて画像を自動的に切り替えることができるようになります。これまでこの機能はユーザーエージェントスタイルシートでのみ許可されていました。この変更はCSS Color Module Level 5の仕様に準拠するもので、Firefoxではすでにサポートされています。

すべての子孫要素であるselectedcontent要素にクローンを作成

selectedcontent要素の特殊なケースに対応するため、いくつかの変更が加えられました。

• 複数のselectedcontent要素が同時に<select>要素内に配置された場合、DOM順で最初の要素だけでなく、すべての要素が最新の状態に保たれます。
• セキュリティ上の問題を解決するため、挿入・削除・移動などの処理中にselectedcontent要素の更新が実行されると、その更新は遅延されます。この更新は、挿入後の処理やマイクロタスクを利用して遅延されます。

コンテナクエリでカンマ区切りをサポート

1つの@containerルールに対して、複数のクエリがサポートされました。クエリのうち少なくとも1つが一致した場合、そのコンテナクエリのルールが適用されます。

この機能により、たとえば、すべてのブラウザでサポートされていない機能に対するフォールバッククエリを設定することが可能になります。

印刷不可領域をCSSで指定する

プリンターは通常、用紙の四隅に印刷できない小さな領域があります（用紙処理機構の制約により）。デフォルトのページ余白はこれらの領域よりも広いことが想定されていますが、デベロッパーが独自に余白を設定した場合、たとえばカスタムヘッダやフッタのためにマージンボックスを追加したりする場合、印刷しても安全な領域を判断する方法が必要です。

CSSのpage-margin-safetyを使用することで、このような印刷不可領域を回避できます。

CSSのfocusgroup属性

CSSのfocusgroup属性を使用すると、デベロッパーは複合ウィジェットに矢印キーナビゲーション、タブストップの保証、最後にフォーカスされた位置の記憶を宣言的に付与でき、手動で記述したタブインデックススクリプトを置き換えることができます。

メディア要素の擬似クラス

<audioや<video>要素に疑似クラスとして、:playing, :paused, :seeking, :buffering, :stalled, :muted, :volume-lockedがサポートされました。

popover=hintのビヘイビアが変更されます

この変更により、popover=hint属性およびpopover=autoとの相互作用について改訂され、簡素化されたスタックモデルが実装されます。これまではpopover=hint内にpopover=autoをネストさせるといった特殊ケースにおいて、2種類のポップオーバー間の相互作用が複雑になり、予期せぬ動作を引き起こす可能性がありました。

新しいモデルではpopover=hintを開いた際に、無関係なpopover=auto要素が意図せず閉じられることはなくなります。デベロッパーはpopover=hint内にpopover=autoを安全にネストできるます。

この変更は、GitHubのプルリクエストにおいて、Mozillaとの標準化に関する議論がきっかけとなりました。

相対アルファカラー

相対アルファカラーは、既存のカラーチャンネルを書き換えることなく、その色の半透明バージョンをCSSで直接生成できる方法です。デベロッパーは現在、透明度の異なる同じ色を使用したい場合、コンポーネントの値を複製するか、事前に計算されたトークンを別々に作成する必要がありました。

CSS Color Module Level 5のalpha()関数では、元のカラーコンポーネントを維持したままアルファ値のみを変更できるため、作成時の負担が軽減され、カラートークンの再利用やメンテナンスが容易になります。

CSSのflex-wrap: balance;

CSSのflex-wrap: balance;を使用すると、デベロッパーはtext-wrap: balance;と同様に、flex-line間でコンテンツを均等に配置して、よりバランスの取れた表示にできます。

CSSの@supportsにおけるnamed-feature()関数

named-feature()関数を使用すると、CSSの@supportsルールにおいて他の@supportsメカニズムではテストできなものの、テストすることが極めて重要とされる特定の命名済み機能の小さなセットを照会できるようになります。

CSSのoverscroll-behavior: chain;

CSSのoverscroll-behaviorプロパティには、none, auto, contain の3つの値があります。これらの値はスクロールの伝播とローカル境界の効果という2つの独立した効果に影響を与えます。たとえば、オーバースクロール時の伸縮などです。

• none: スクロール伝播なし、ロ​​ーカル境界効果なし。
• auto: スクロール伝播あり、ローカル境界効果あり。
• contain: スクロール伝播なし、ロ​​ーカル境界効果あり。

今回のアップデートで、セットを完成させる新たなchainという新たな値が追加されました。これはスクロールの伝播を制御し、ローカル境界の影響を排除します。

overscroll-behavior: chain;を使用すると、スクローラーとして実装されたサイドメニューなどのエフェクトに役立ちます。メニューを表示させ、端に到達してもオーバースクロールしたり、伸縮したり、移動したりすることはありません。ただし、スクロールは親要素に連鎖します。