CSS Reference

calc-size()

内在サイズを計算してプロパティの値を指定する

calc-size() 関数は、CSS プロパティに指定する値を計算式で書くことができる CSS 関数です。同様の計算式を使用可能な関数として calc() 関数がありますが、Intrinsic size（内在サイズ）指定キーワード（<intrinsic-size-keyword>）を値として計算することができません。calc-size() 関数は、計算値として <intrinsic-size-keyword> を用いることが可能です。

calc-size() 関数の基本的な構文は下記のようになります。

<calc-size()> = calc-size( <calc-size-basis>, <calc-sum> )

<calc-size-basis> は下記のように定義されます。

<calc-size-basis> = [ <intrinsic-size-keyword> | <calc-size()> | any | <calc-sum> ]

calc-size() 関数は入れ子にすることも可能です。

さらに、<calc-sum> は下記のように定義されます。

<calc-sum> = <calc-product> [ [ '+' | '-' ] <calc-product> ]*
  <calc-product> = <calc-value> [ [ '*' | '/' ] <calc-value> ]*
  <calc-value> = <number> | <dimension> | <percentage> |
                 <calc-keyword> | ( <calc-sum> )
  <calc-keyword> = e | pi | infinity | -infinity | NaN

calc-size()のサンプルソース

.sample {
  width: auto;
  transition: width 0.35s ease;

  &:hover,
  &:focus-visible {
    width: calc-size(max-content, size);
  }
}
/* × 下記の指定は、2つのサイズがどちらも内在サイズのため、アニメーションは動作しません */
.sample {
  width: auto;
  transition: width 0.35s ease;

  &:hover,
  &:focus-visible {
    width: calc-size(max-content, size);
  }
}

主要ブラウザの対応

IE11 ×
Edge（EdgeHTML） ×
Edge（Chromium） ○
Chrome ○
Firefox ×
Safari ×
iOS Safari ×
Android Chrome ○

関連するCSS関数

仕様書

用途から CSS プロパティやセレクタを探す

用途から CSS プロパティやセレクタを逆引きできます。

対応ブラウザから CSS プロパティやセレクタを探す

対応ブラウザから CSS プロパティやセレクタを逆引きできます。

Edge（EdgeHTML）
Edge（Chromium）
Firefox
Chrome
Safari
iOS Safari
Android Chrome