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

Post on:2024年1月30日

はじめに

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

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

CSSによるハイライトの継承

CSSによるハイライトの継承を使用すると、::sectionや::highlightなどの疑似クラスは要素チェーンではなく、疑似ハイライトのチェーンを通じてプロパティを継承します。その結果、ハイライトでのプロパティ継承がより直感的なモデルになります。

この機能は、CSS Pseudo-Elements Module Level 4の「サポートされているプロパティにカスケードによって値が与えられていない場合、その指定された値は元の要素の親要素の対応するハイライト擬似要素からの継承によって決定されます。」を実装したものです。

CSSによるスクロールバーのスタイル

CSS Scrollbars Styling Module Level 1により、デベロッパーはスクロールバーのカラーや太さを設定してスタイルできます。この仕様では、2つのプロパティが追加されました。

scrollbar-colorプロパティは、スクロールバーの配色を設定できる機能を提供します。これによりスクロールバーをWebページのデザインに合わせることができます。

scrollbar-widthプロパティは、スクロールバーの幅を設定したり、スクロールする可能性に影響を与えずにスクロールバーを完全に非表示にすることができます。

font-paletteプロパティでカラーフォントをアニメーション

CSSのfont-paletteプロパティを使用すると、カラーフォントのレンダリングに使用される特定のパレットを選択できます。新しく追加されたこのプロパティのアニメーション化のサポートにより、パレット間のトラジションは個別のステップではなく、選択された2つのパレット間のスムーズなトランジションを実現します。これは、CSSアニメーションやトランジションのどこでも機能します。

CSSのスペルチェック機能

ユーザエージェントがスペルミスや文法的に間違っているとフラグを立てたテキストをスタイル設定するためのハイライト疑似要素、スペルミスや文法エラーに対するユーザエージェントのデフォルトの装飾を公開する行装飾をCSSは表示します。これらの機能により、デベロッパーはデフォルトのスペルミスや文法エラーに対して、判別しやすい色を設定したり、背景色で強調したり、デバイスエクスペリエンスに溶け込むカスタムスペルチェックを実装することができます。

SVGのCSSマスキングの改善

この機能は、Chrome 120で改善されたCSSマスクサポートの後継で、SVGの新しいマスクサポート（複数のマスク、mask-mode, mask-composite, mask-position, mask-repeat）を追加するものです。さらに、リモートSVGマスク（たとえば、mask: url(masks.svg#star)）もサポートされるようになりました。

displayプロパティの新しい値

CSSのdisplayプロパティに新しい値として、rubyとruby-textが追加されました。<ruby>と<rt>のデフォルトのdiplay値は、それぞれrubyとruby-textに変更され、ルビのレイアウトはこれらの値を尊重します。デベロッパーは<div>など任意の要素を使用して、displayプロパティの新しい値を設定することで、ルビを使用できます。