先日、といってもこの記事を書くまでにだいぶ時間が空いてしまいましたけども、w3c/csswg-drafts のコミット履歴の中に 「::details-content 疑似要素が追加された」 という情報をみて、下記のように Twitter （X） に投稿しました。
ほー これは実装されれば便利そう
Add ::details-content pseudo-element.https://t.co/Hzx5bwUqIC— Yoshiki Kato (@burnworks) July 21, 2024
折角なのでこの Blog でも簡単に紹介しておこうと思います。
今回、::details-content 疑似要素が追加されたのは、「CSS Pseudo-Elements Module Level 4 Editor's Draft, 20 June 2024」 です。具体的には下記の箇所。
具体的な CSS サンプルソースは下記のような感じになります。
details::details-content {
opacity: 0;
transition: content-visibility 300ms allow-discrete, opacity 300ms;
}
details[open]::details-content {
opacity: 1;
}
何が便利なのか
過去に details 要素を使用したサンプルと、details 要素に関する簡単な解説記事を書いています （下記リンク参照）。
その中で説明に使った、details 要素のサンプルソースコード例は下記のようになりますが、
<details>
<summary>募集要項</summary>
<p>
ここにコンテンツ
</p>
</details>
details 要素内にある summary 要素は、「要約 （Summary）」、または 「凡例 （Legend）」 を意味し、それ以外の内容は、「追加情報 （Additional information）」 や 「コントロール （Controls）」 として扱われます。
その際、この 「追加情報」 に該当する部分に一括してマッチする CSS セレクターは今まで存在していませんでした （もちろん、details > :not(summary) {...} みたいな書き方をすれば何とかできないこともないですが）。
今回、編集者草案 （Editor's Draft） に追加された ::details-content 疑似要素は、簡単にこの 「追加情報」 に当たる部分を選択することができるため、CSS の記述がシンプル、かつ、わかりやすくなるのではないかと期待できます。
もちろん、まだ Editor's Draft に追加されただけで、実際にブラウザの実装やサポートがどうなるのかについてはわかりませんが、面白そうだったので紹介まで。
