| 形式 | calc-size(calc-size-basis, calc-sum) |
|---|---|
| 詳細 | calc-size-basis = auto | min-content | max-content | fit-content | content | calc-sum calc-sum = 計算式 |
| サポート | https://caniuse.com/mdn-css_types_calc-size |
通常、auto, min-content, max-content などのキーワードを用いた長さには calc() による計算や、トランジションを適用することはできませんでしたが、calc-size() によって計算したりトランジションを適用することができます。これまで高さが不明なアコーディオンをトランジション付きで開閉するには JavaScript を用いたり、グリッドを使用したトリッキーな実装しかできませんでしたが、calc-size() により CSS のみで不定サイズのアコーディオンが可能となります。
第一引数には計算の元となる長さを指定します。
第二引数では、第一引数の値を size として受け取り、calc() が行うような計算を行います。例えば、下記の例ではコンテンツを通常通りに表示した場合の高さの2倍の高さを指定することになります。
height: calc-size(auto, size * 2);
calc-size() と類似のプロパティに interpolate-size があります。interpolate-size を用いても auto 等に対するトランジションは有効になりますが、下記のような計算を行うことはできません。計算が不要であれば interpolate-size、計算が必要であれば calc-size() の使い分けでよいかと思います。
height: calc(auto + 3rem); /* 計算できない */
CSS のみを使用して実現する任意高さのアコーディオンの例を示します。コンテンツ部分の高さは通常時は 0、チェックボックスがオンの時は auto になり、これに対してトランジションが効きます。calc-size() 未サポートブラウザのために、height: auto を指定しています。
.my-accordion {
border: 1px solid #ccc;
padding: .2rem;
background-color: #fff;
.my-accordion-content {
height: 0;
overflow: hidden;
transition: height .3s ease;
padding-left: 1rem;
}
[type="checkbox"]:checked ~ .my-accordion-content {
height: auto; /* for unsupported browser */
height: calc-size(auto, size);
}
}
<div class="my-accordion">
<input type="checkbox" id="cb1"><label for="cb1">アコーディオン</label>
<div class="my-accordion-content">
<div>AAA</div>
<div>AAA</div>
<div>AAA</div>
<div>AAA</div>
<div>AAA</div>
<div>AAA</div>
</div>
</div>