calc-size()
Experimental: これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。
calc-size() は CSS の関数で、auto、 fit-content、max-content などの内在サイズ値に対して計算を行うことができます。これは、通常の calc() 関数では対応していません。
calc-size() の返値は補間処理も可能であり、サイズキーワードの値をアニメーションおよびトランジションで使用することができます。事実上、プロパティ値に calc-size() を含めると、選択範囲に interpolate-size: allow-keywords が自動的に適用されます。
ただし、 interpolate-size は継承されるため、要素に適用すると、その要素とその子要素に適用されているすべてのプロパティの、内在サイズのキーワードの補間処理が可能になります。そのため、内在サイズのアニメーションを有効にするには、interpolate-size を使用することをお勧めします。内在サイズのアニメーションを有効にするために calc-size() を使用するのは、計算も必要な場合のみにしてください。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
calc-size 実験的 | 129 | 129 | | | 129 | |
基本構文
CSS
.panel {
height: calc-size(auto, size);
transition: height 0.3s;
}
.panel.collapsed {
height: 0;
}ライブデモ
実務での使いどころ
-
height: auto へのスムーズなアニメーション
calc-size(auto) を使って、従来不可能だった自動高さへのCSSトランジションを実現し、アコーディオンUIなどを簡潔に実装できます。
注意点
- 現在Chrome/Edgeのみの対応で、SafariとFirefoxでは未サポートです。プロダクション使用には十分なフォールバックが必要です。
アクセシビリティ
- アコーディオンなどの開閉アニメーションに使用する場合、prefers-reduced-motion を考慮し、モーション設定に応じてアニメーションを無効化してください。