このページは Cloud Translation API によって翻訳されました。

Chrome 131 の新機能

Mariko Kosaka

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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