Chrome 131 の新機能

Mariko Kosaka
X

必知事項は次のとおりです。

担当させていただきます、マリク コサカと申します。Chrome 131 のデベロッパー向けの新機能について詳しく見てみましょう。

CSS ハイライトの継承

::selection 疑似クラスと ::target-text 疑似クラスの CSS ハイライトの継承が変更されます。これにより、スタイルの継承がより直感的なモデルになり、最近追加された ::highlight、::spelling-error、::grammar-error 疑似クラスと整合するようになります。

太字のテキストを含む次のコード スニペットについて考えてみましょう。

p {
  color: deeppink;
}

.blue::selection {
  color: blue;
}

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

以前のバージョンの Chrome では、強調表示されたテキストを選択しても、親の段落要素に ::selection 疑似クラスを設定しても、テキストの色が青に変わりませんでした。

ピンクでハイライト表示されたテキスト

これは、元の要素の継承モデルを使用して実装されているためです。したがって、この場合の ::selection 疑似クラスは、blue クラスを持つ要素にのみ一致します。この段落内の要素には blue クラスがありません。

ハイライトの継承が変更されたため、Chrome 131 で同じテキストを選択すると、テキストの色が青色に変わります。

青色でハイライト表示されたテキスト

これに関連する変更は他にもあります。この機能の開発に携わった Igalia の Stephen Chenney 氏が書いた CSS 選択スタイルの継承に関する変更もご覧ください。

<details> と <summary> のスタイル設定を改善

開示ウィジェットやアコーディオン ウィジェットを作成するために、<details> 要素と <summary> 要素の構造をスタイル設定するオプションが追加されました。

このリリースで導入された変更により、display プロパティの使用が可能になり、展開と折りたたみの部分にスタイルを設定する ::details-content 疑似要素が追加されました。

これまで、details 要素の表示タイプを変更することはできませんでした。この制限は緩和され、グリッド レイアウトや Flex レイアウトなどを使用できるようになりました。

複数の details 要素で構成されたこの限定アコーディオンの例では、いずれかの details 要素が展開されると、そのコンテンツが summary の横に配置されます。

Flex レイアウトのアコーディオン ウィジェット

これは、details 要素でフレックス レイアウトを使用することで実現できます。grid などの他の表示値を使用して、他のレイアウト パターンを試すこともできます。

詳しくは、Bramus の記事「<details> のスタイル設定に関するその他のオプション」をご覧ください。

@page 余白ボックス

ウェブドキュメントを印刷する際や PDF としてエクスポートする際のページ マージン ボックスのサポートが追加されました。

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

ページの余白は、CSS の @page ルールを使用して定義します。

@page :right {
  @bottom-left {
    content: "My book";
    font-size: 9pt;
    color: #333;
  }
}

マージン ボックスの外観とコンテンツは、生成されたコンテンツを使用して 16 個のマージン ボックスを表す at ルール内の CSS プロパティで指定します。

ページ番号の場合、カウンタもサポートされています。現在のページ番号には page、合計ページ数には pages を使用します。

詳しくは、Rachel の記事「CSS を使用して印刷時にウェブページの余白にコンテンツを追加する 」をご覧ください。

その他

他にもさまざまな機能があります。

  • clip-path、fill、stroke、marker の外部 SVG リソースをサポート。
  • WebHID は専用のワーカー コンテキスト内で有効になります。
  • font-variant-emoji CSS プロパティを使用して、絵文字の動作を制御します。

関連情報

主なハイライトのみを記載しています。Chrome 131 のその他の変更については、以下のリンクをご覧ください。

登録

最新情報を入手するには、Chrome Developers の YouTube チャンネルにチャンネル登録してください。新しい動画が公開されると、メール通知が届きます。

担当の Mariko Kosaka です。Chrome 132 がリリースされ次第、Chrome の新機能についてお知らせします。