CSSで乱数を生成できるrandom()関数がついにサポート！ Chrome 156で新しく追加された6つのCSSの機能

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

今回のアップデートで注目すべきは、CSSで乱数を生成できるrandom()関数、:navigation-source疑似クラス、text-decoration-insetプロパティなど、Web制作者は要チェックです！

Chrome 156 Release Notes
Chrome 156 beta

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

• はじめに
• :navigation-source疑似クラス
• CSSのrandom()関数
• CSSのtext-decoration-insetプロパティ
• 登録済みカスタムプロパティのオプション記述子
• 単軸スクロールコンテナ
• scroll-snap-typeプロパティのpair値

はじめに

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

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

:navigation-source疑似クラス

:navigation-source疑似クラスは、現在のナビゲーションをトリガーにした要素（リンク、ボタン、フォームなど）に一致する疑似クラスを定義します。

デベロッパーはナビゲーションのソースとナビゲーションのプロセスとの関係を視覚的に示すことができます。たとえば、アニメーションを使用してサムネイルを拡大するといったことが可能です。

CSSのrandom()関数

CSSのrandom()関数は、JavaScriptに頼ることなくCSS内で直接乱数を生成でき、指定した範囲内で乱数を生成することも可能です。コードの複雑さを軽減すると同時に、多様で動的なデザインを作成しやすくします。

デベロッパーはたとえば、random()関数を仕様してコンテナ内に要素をランダムに配置することができます。

この機能にはキャッシュ制御も含まれています。デフォルトでは、random()関数は新しい一意の値に解決されます。デベロッパーは、関数の最初の引数として<random-key>値を渡すことで、プロパティや要素間でランダムな値がどのように共有されるかを制御できます。

CSSのrandom()関数はすでにSafariでサポートされており、これでChromeとEdgeにもサポートされました。また、Firefox Nightlyには実装されています。

randaom()関数のサポートブラウザ

CSSのtext-decoration-insetプロパティ

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

この機能によりデベロッパーは、装飾線の間隔を調整したり、背景グラデーションや追加要素の代わりにネイティブのテキスト装飾を使用して表示効果を作成できます。

たとえば、下線を1emだけ右にずらす場合は、下記のように設定します。

また、その他の使い方はサンプルページをご覧ください。

text-decoration-inset sampler

登録済みカスタムプロパティのオプション記述子

@propertyルール内の任意の記述子と、CSS.registerProperty()の対応するオプションメンバーを省略できます。省略された値は、デフォルトでユニバーサル構文、継承、および確実に無効な初期値になります。無効な記述子には、通常のCSSフォールバック動作が使用されます。

この機能により、デベロッパーは定型コードが不要になり、初期値を保証された無効な値にデフォルト設定することで、型付きプロパティが使用ごとにvar()フォールバックを使用できるようになります。

単軸スクロールコンテナ

CSSのoverflowプロパティは軸ごとに動作を指定できますが、スクロールコンテナが単一の軸のみを担当するようにする方法は提供されていませんでした。

overflowプロパティを拡張し、clipと組み合わせたスクロール可能な値をサポートします（overflow: scroll clip;など）。この機能により、デベロッパーはposition: sticky;を軸ごとに異なる親スクロールコンテナで制限できるようになり、overflow: clip;を使用する軸が所定の位置に留まるようにする方法が提供されます。

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

長年の悩みがこれで解決！ CSSのposition: stickyの仕様が変わり、上部固定と左端固定が同時に実装できるようなります

scroll-snap-typeプロパティのpair値

scroll-snap-typeプロパティは、スクロールコンテナ上でスナップポイントがどの程度厳密に適用されるか、またどの軸に沿ってスナップが発生するかを定義します。CSS Scroll Snap Module Level 2にpairキーワードを導入することを提案するものです。

scroll-snap-type: both;では、スクロール コンテナは各軸に沿ってスナップ位置を個別に評価します。この動作は、水平方向と垂直方向の配置が分離されている直交グリッドではよく機能します。

scroll-snap-type: pair;を設定すると、スナップがインラインとブロックの両方の次元で同じ要素に揃うようになり、bothでは不可能だった両方の軸を結合し、2次元座標ペアとして扱うことができます。このキーワードの追加により、デフォルトのスクロール動作を変更したり、既存のセマンティクスを変更する必要はありません。

下記は2D平面上に配置されたランドマークを表示する地図スクロールのデモページです。地図ビューポートをパンすると、コンテナは常に水平軸と垂直軸の両方を同じランドマークボックスに合わせ、ビューポート内で最も近いランドマークを中央に配置されます。

デモページ