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

Post on:2024年11月14日

sponsorsr

Chrome 131で追加された、CSSの新しい機能8つを紹介します。
今回のアップデートでは、CSSのハイライト継承が変更されたり、details要素で実装するアコーディオンのCSSが追加されたり、ページ余白ボックスを使用した印刷レイアウトが簡単になるなど、Web制作者は要チェックです！

New in Chrome 131
Chrome 131 beta

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

はじめに
anchor-scopeプロパティ
font-variant-emojiプロパティ
ハイライトの継承
detailsとsummary要素のスタイル改善
印刷時のカスタムヘッダとフッタ
@propertyの<string>構文サポート
相対カラー構文でcurrentcolorをサポート
外部SVGリソースの各プロパティのサポート

はじめに

11/13の昨日にリリースされたChrome 131で8つのCSSの新しい機能が追加されました。対象となるChrome 131は、Android、ChromeOS、Linux、macOS、Windowsに適用されます。

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

anchor-scopeプロパティ

CSSのanchor-scopeプロパティを使用すると、アンカー名の可視性を特定のサブツリーに制限することができます。

font-variant-emojiプロパティ

CSSのfont-variant-emojiプロパティは、絵文字グリフを色付き（絵文字スタイル）と単色（テキストスタイル）で制御する方法を提供します。これは各絵文字コードポイントの後に絵文字バリエーションセレクタ、具体的にはテキストの場合はU+FE0E、絵文字の場合はU+FE0Fを追加することでも実行できます。

ハイライトの継承

CSSによるハイライトの継承が、::selectionと::target-text疑似クラスで変更されました。これにより、スタイル継承のより直感的なモデルが作成され、::highlightsや::spelling-errorや::grammar-error疑似クラスとの整合性もとれます。

たとえば、下記のコードをご覧ください。

<p class="blue">This is <em>emphasized</em> text.</p>

1	<p class="blue">This is <em>emphasized</em> text.</p>

CSSは、下記の通りです。

p {
  color: deeppink;
}
.blue::selection {
  color: blue;
}

p {

color: deeppink;

}

.blue::selection {

color: blue;

}

このコードをブラウザで表示すると、テキストのカラーはピンクで、選択してハイライトさせたテキストがブルーになるはずです。しかし、Chromeの以前のバージョンではp要素に::selection疑似クラスを設定しているにもかかわらず、選択してもブルーに変わりません。

上: Chromeの以前のバージョン、下: Chrome 131+で表示

この原因は、元の要素の継承モデルを使用して実装されたためです。したがってこの場合の::selection疑似クラスはこの段落の中の要素が持っていない.blueのクラスを持つ要素にのみマッチします。

ハイライトの継承の変更により、Chrome 131+では選択したテキストのカラーはブルーに変わります。実際の動作は、デモページをご覧ください。最初はピンクで表示され、選択したテキストのみブルーに変わります。

See the Pen
::selection by coliss (@coliss)
on CodePen.

detailsとsummary要素のスタイル改善

アコーディオンや開閉ウィジェットを実装するために、details要素とsummary要素の構造をスタイルするオプションが増えました。

この変更により、displayプロパティを設定できない制限が取り除かれ、展開や折りたたみ部分のコンテナにスタイルするための::details-content疑似要素も追加されました。

これまではdetails要素のdisplayタイプを変更することはできませんでしたが、これからはグリッドやフレックスボックスなどを使用できます。

このレイアウトはdetails要素にフレックスレイアウトを使用することで実現されています。また、display: grid;に変更してレイアウトパターンを試すこともできます。実際の動作は、デモページをご覧ください。

See the Pen
Styling <details>: Horizontal Accordion (no animation) by coliss (@coliss)
on CodePen.

印刷時のカスタムヘッダとフッタ

Webページを印刷したり、PDFにエクスポートする際に、ページのマージンボックスをサポートしました。

@pageのマージンボックスを使用すると、ページのマージン領域のコンテンツを定義できます。たとえば、ブラウザによって生成される組み込みのヘッダとフッタを使用するのではなく、カスタムのヘッダとフッタを設定できます。

マージンボックスは、CSSの@pageルールを使用して定義します。マージンボックスの外観とコンテンツは、コンテンツプロパティを含む@ルール内のCSSプロパティで設定します。ページ番号付け用のカウンターもサポートされています。仕様では、現在のページ番号を表すpageと合計ページ数を表すpagesというカウンター名が定義されています。