先日 @starting-style を調べている時に、interpolate-size と calc-size() というCSSプロパティを知ったので調べた
interpolate-size と calc-size() に関しては、以下の記事がわかりやすかった
interpolate-size と calc-size() はどちらも Chrome 129 （ベータ版）で追加されたもの
Chrome 129 ベータ版 | Blog | Chrome for Developers
interpolate-size
interpolate-size は px や % のようなサイズ指定ではなく、auto, min-content, fit-contentのような内在サイズキーワードに対してページ内でアニメーションとトランジションを行うことをできるようにする機能
interpolate-size: allow-keywordsとすることで intrinsic-size のアニメーション化を許可する設定になる
オプトインする場合は、root要素等で allow-keywords を指定することが推奨されているとのこと
calc-size()
calc-size()は calc() に類似したCSS関数だが、intrinsic-sizeを基準としてサイズ計算を行うためのCSS関数
主に interpolate-size プロパティで許可したアニメーションの中間値を表現するために用いる
calc-size(<calc-size-basis>, <calc-sum>)
calc-size-basis は使用したい内在サイズキーワードで、calc-sumはそのcalc-size-basis で算出された数値（size）を使った計算式を指定する
例
width: calc-size(min-content, size * 1.5)
CSSだけでアコーディオンの実装が可能になるので早く全ブラウザで実装されるといいなと思った
