yuheijotaki.com

CSS calc-size() を試してみる

目次

概要

CSSの auto などキーワード値を補間計算する calc-size() 関数を試してみた。

calc-size() とは

calc-size() を使うと、 width や height に設定される auto, min-content, max-content, fit-content などの値を補間計算することができる。

現状Chromeでのみサポート済み。（Can I use）

デモ

分かったこと、所感

  • なんだかんだ使い所はめっちゃ多くはなさそうだなとは思う
    • 例えば思いついたのは、アコーディオンや「もっと見る」ボタンで隠していた記事を表示するときくらい？
    • わざわざ高さを測ったりしているとJSの記述量も多かったので助かるは助かる
  • calc-size() は Safari では次の v18.1 からサポートされるようなので実質Firefox待ち
  • @keyframes で calc-size() を指定しても使えないっぽい
  • interpolate-size: allow-keywords; を root に指定すると、 calc-size() の指定をせずにアニメーションが動作する
    • デフォルトでキーワード値がアニメーションする仕様になると、既存のサイトで不整合が起きる可能性を鑑みてとのこと
      • おそらく transition-property: all; にしているサイトがそれらに該当する認識
  • details のデモは現状最新のChrome130ではアニメーションしない
    • ::details-content がChrome131からサポートされるため、そこでアニメーションが動作するはず（Can I use）

参考記事