今回の定期リリースの目玉はcalc-size()
関数やinterpolate-size
プロパティーが定義され始めたValues and Units ModuleのLevel 5だ。またGrid Layout ModuleのLevel 3ではmasonryも定義され始めている。新しい仕様が4つ加わったため、変更点はなかなか多い。
values-5ではattr()
の先延ばしが再定義されていたり、既に実装のあるcolor-mix()
関数やcross-fade()
関数が新たにミックス記法として定義されている。ミックス記法は色々な値を混ぜるための関数群の定義で、どれくらい混ぜるかという定義と共に移動してきたことになる。新たに追加されたものとしては以下のものが挙げられる。
@supports
の冗長さを軽減するfirst-valid()
関数- ランダムな数値を生成する
random()
関数 - 引数の中からランダムな値を返す
random-item()
関数 - 兄弟要素の数を整数で返す
sibling-count()
関数 counter()
と違って整数として返すsibling-index
関数auto
やmax-content
などが使えるcalc-size()
関数auto
やmin-content
などへアニメーションできるようにするintepolate-size
プロパティー
なんといってもcalc-size()
関数だろう。フレックスボックスやグリッドで使いたくなったことが一度ならずあるはずだ。他にもキーワードは環境による微妙なずれを吸収してくれるので、そういったことを考慮せずにバンバン計算で済ませられるだろう。ただし複数のキーワードは使えないようになっている(ように読める)。Chrome 129から実装があり、既に試すことが可能だ。実装が揃うのはかなり先のことになるだろうが、1年後くらいには自由自在に使いこなせるようになっていたい。