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 クラスの要素にのみ一致します。

ハイライトの継承が変更されたため、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-rules 内の CSS プロパティで指定します。

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

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

その他

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

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

関連情報

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

登録

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

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