Web制作者は要チェック! Chrome 131で新しく追加された8つのCSSの機能
Post on:2024年11月14日
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
疑似クラスとの整合性もとれます。
たとえば、下記のコードをご覧ください。
1 |
<p class="blue">This is <em>emphasized</em> text.</p> |
CSSは、下記の通りです。
1 2 3 4 5 6 |
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
というカウンター名が定義されています。
@propertyの<string>構文サポート
登録されたカスタムプロパティの<string>
構文コンポーネント名をサポートしました。
相対カラー構文でcurrentcolorをサポート
CSSの相対カラー(from
キーワードで設定)で、currentcolor
をベースとして使用できるようにしました。これにより、要素のテキストカラーをベースにして要素のボーダーやシャドウや背景などを補色に設定できます。
この機能にはcolor-mix(in srgb, rgb(from currentcolor r g b), white))
やrgb(from rgb(from currentcolor 1 g b)
のようにcurrentcolor
に依存する色関数が入れ子になっている場合も含まれます。
外部SVGリソースの各プロパティのサポート
この機能により、クリップパス、マーカー、ペイントサーバー(fillやstrokeなど用)の外部参照がサポートされます。たとえば、clip-path: url("resources.svg#myPath")です。
sponsors