details要素に命を吹き込む::details-content擬似要素の登場
details要素のコンテンツ部分にスタイルを適用できる::details-content擬似要素がBaseline 2025入りを果たしました。使い方やアニメーションの適用例を紹介します。
details要素に関する新たなCSS擬似要素::details-contentが導入されました。
::details-content擬似要素を使用することで、details要素内のコンテンツ部分に対してスタイルを適用できます。
details要素は、アコーディオンのように折りたたみ可能なコンテンツを作成するためのHTML要素です。
summary要素と組み合わせて使用され、ユーザーのアクションに合わせてコンテンツが開閉するUIを提供します。
<details>
<summary>詳細を見る</summary>
<p>ここに詳細が記述されます。</p>
</details>上記のhtmlは、以下のように表示されます。
details要素とsummary要素を使った例
詳細を見る
ここに詳細が記述されます。
開発者ツールなどを確認すると、コンテンツ部分がslot要素として表示されていることがわかります。
::details-content擬似要素は、このslot要素に対してスタイルを付与できます。
Playground
detailsの子要素全てにスタイルを割り当て
p要素1
p要素2
p要素3
::details-contentを用いてslot要素に割り当て
p要素1
p要素2
p要素3
上記の例はdetailsの子要素（summary要素を除いたもの）に対してスタイルを適用した場合（前者）と、::details-content擬似要素に対してスタイルを適用した場合（後者）の違いを示しています。
/* 前者 */
details > :not(summary) {
border: 2px solid var(--color-primary-border);
}
/* 後者 */
details::details-content {
border: 2px solid var(--color-primary-border);
}前者はdetailsの子要素がただ一つの要素でなければ想定した通りにスタイルを割り当てられず、後者は常にdetailsのコンテンツ部分にスタイルを適用できることがわかります。
detailsの子要素の中身に依存せずに、detailsのコンテンツ部分にスタイルを付与できる::details-content擬似要素の強力さが読み取れます。
後者のケースはslot要素に対するスタイルなので、閉じている時にも装飾が行われます。
展開中の時のみスタイルを付与したいときは[open]を利用して以下のように書きます。
/* 後者 */
details[open]::details-content {
border: 2px solid var(--color-primary-border);
}::details-content擬似要素は、開閉時のアニメーションを定義する際にも便利です。
details要素が持つ[open]という状態は、即座に変化するため、アニメーションを適用するのは困難でした。
しかし、::details-content擬似要素はslot要素に対するスタイルなので、[open]に引っ張られずにそれ自身の大きさ等をトリガーにアニメーションを適用できます。
アニメーション付きdetails要素の例
::details-contentによるアニメーション
想定した通りにアニメーションが適用されます
例として実装したアニメーションは@prefers-reduced-motionに対応していません。注意してご利用ください。
details::details-content {
interpolate-size: allow-keywords;
transition: height 0.5s ease, content-visibility 0.5s ease allow-discrete;
height: 0;
overflow: clip;
}
details[open]::details-content {
height: auto;
}以上が、details要素に命を吹き込む::details-content擬似要素の紹介です。
Baseline 2025で導入され、主要なブラウザはすでに利用可能です。ぜひ利用してみてください。