01
LIVE COMPARISON
同じdetails、違う開き方
SAME HTML
WHY DETAILS?
HTMLに開閉を任せる
- SEMANTICS開閉できる補足情報と伝わる
- KEYBOARDEnter・Spaceで標準操作
- STATEopen属性で状態を持てる
- SEARCH非表示状態でもページ内検索の対象になる
NAME ATTRIBUTE
1つだけ開く
GRID TRACK
0fr → 1fr
grid-template-rows
01なぜdetailsを使う？
開閉・キーボード操作・状態管理がHTMLに含まれます。
JavaScriptで開閉ロジックを作らなくても、基本機能をそのまま利用できます。
02Gridは何を動かす？
中身を置いた1行の高さを、0frから1frへ変えます。
内容の高さを数値で決めず、Gridトラックの伸縮として表現します。
03非対応環境では？
通常のdetailsとして、即時に開閉します。
アニメーションがなくても、内容と操作方法は失われません。
INTRINSIC SIZE
0 → auto
interpolate-size
01何が読みやすい？
閉じた高さ0から、内容本来のautoへ移ると読めます。
要素自身の高さを直接アニメーションするため、意図が素直です。
02なぜ指定が必要？
autoは従来、数値との間を補間できませんでした。
allow-keywordsで、長さと内在サイズの補間を明示的に許可します。
03今すぐ使える？
現時点ではChromium系への追加強化として使います。
@supportsで囲み、非対応環境には標準の開閉を残します。
PROGRESSIVE ENHANCEMENT
非対応でも開閉できる。 対応ブラウザでは、動きまで滑らかになる。
HTML→details-content→motion
CSS RECIPE
開閉の仕組みをコピー
GRID TRACK
0frから1frへ
内容をGridの1行に入れ、そのトラックを伸縮します。内側の高さを数値で決めません。
grid-template-rows
INTRINSIC SIZE
0からautoへ
要素自身の高さを、0から内容本来のサイズへ補間します。現在はChromium系の追加強化です。
interpolate-size