Chrome 129 Beta
Chrome 129 Betaが2024-08-21にリリースされました。
position-area の名称変更や Intl.DurationFormat の追加といったアップデートが盛り込まれています。
本記事では、アップデートの中でも特に実験的な機能のひとつである interpolate-size と calc-size() について紹介します。
前提知識: intrinsic-size(内在サイズ)
intrinsic-sizeはピクセルや一般的なパーセンテージ指定のような外部レイアウトに依存したサイジングではなく、要素に含まれるコンテンツの大きさを基準に要素のサイズを変更する仕組みです。
現在、auto や min-content、max-content といったキーワード値がこれに該当しており、それぞれ要素内コンテンツの折り返し可能なサイズを基準に挙動が決定されます。
interpolate-size
interpolate-size は、intrinsic-sizeをアニメーション化するかどうかを指定するためのCSSプロパティです。
既存のCSSではキーワード値をベースにしたアニメーションは非対応でした。
そのため、既存のWebページではキーワード値はアニメーションしない前提のもとでスタイルが組まれています。
このCSSプロパティはそれらの既存資産がキーワード値のアニメーション化によって不意に破壊されることを防ぐためのものです。
現状、intrinsic-size ベースのアニメーションが有効化されているのはChrome 129 Betaのみですが、今後Baselineとなった後にはroot要素等で allow-keywords を指定することが推奨されています。
| キーワード | 挙動 |
|---|---|
| allow-keywords | intrinsic-sizeのアニメーション化を許可する |
| numeric-only | intrinsic-sizeのアニメーション化を許可しない, 初期値 |
使用例
:root {
interpolate-size: allow-keywords;
}
.target {
width: min-content;
}
.transition {
transition: width 2s ease;
width: 200px;
}
<p> 要素の width を min-content から200pxへトランジションする例です。
今回の例では、:root に対して interporate-size: allow-keywords を指定することで、開始もしくは終了時の値がキーワード値となっていてもトランジションが補完されるようになっています。
Chrome 129 Beta現在の動作として、開始値及び終了値の両方がキーワード値だった場合はトランジションが補完されないことを確認しているため、注意が必要です。
calc-size()
calc-size() は、intrinsic-sizeを基準としてサイズ計算を行うためのCSS関数です。
calc-size( <calc-size-basis>, <calc-sum> )
| シンタックス | 内容 |
|---|---|
| <calc-basis> | <intrinsic-size-keyword>, <calc-size()>,, any, <calc-sum> |
| <calc-sum> | <calc-basis> からの相対的な数値(ex. '50% + 20px') |
calc-size-basisはintrinsic-sizeキーワードや calc-size() をネストして指定でき、calc-sumはcalc-size-basisからの相対的な値を指定できます。
使用例
:root {
interpolate-size: allow-keywords;
}
.accordion {
overflow: hidden;
height: 28px;
}
.transition {
transition: height 2s ease;
height: calc-size(auto, size - 50px);
}
この例では簡素なアコーディオンを表現しています。
特徴的なのは、heihgt: auto の値から相対的に 50px少ない、パラグラフの最下段にある this is invisible text の文字が表示されないように計算されていることです。
calc-size() ではこのようにintrinsic-sizeをターゲットとして相対的な値を計算できます。
また、calc-size() のターゲットとなるキーワード値がトランジション前後で同じ場合、キーワード値同士であってもトランジションすることが可能です
:root {
interpolate-size: allow-keywords;
}
.accordion {
overflow: hidden;
height: calc-size(auto, size - 50px);
}
.transition {
transition: height 2s ease;
height: auto;
}
トランジション前後でどちらも auto が使用されていますが、トランジションは正常に動作するのがわかると思います。
一方、ターゲットとなるキーワード値が異なる場合は calc-size() を利用していたとしてもアニメーションがスキップされることには注意が必要です。
Discussion