CSSの新しい関数がすごく便利! Chrome 129で追加されたCSSの2つの新機能とアップデートされた3つの機能

これまではCSSアニメーションで幅や高さのサイズを変更する時は、明示的なサイズ指定が必要でした。width: auto;width: max-content;のようなキーワードではCSSアニメーションは機能しませんでしたが、CSSの新しい関数によって可能になります。

Chrome 129では、calc()に似た新しい関数calc-size()width: auto;などのCSSアニメーションを可能にするinterpolate-sizeプロパティ、さらにbackdrop-filterプロパティの改善など、3つの機能もアップデートされました。
Web制作者は要チェックです!

Chrome 129で新しく追加された5つのCSSの機能

New in Chrome 129
Chrome 129 beta

下記は各ポイントを意訳したものです。
※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。

はじめに

9/18にリリースされたChrome 129で2つのCSSの新しい機能が追加され、3つの機能がアップデートされました。対象となるChrome 128は、Android、ChromeOS、Linux、macOS、Windowsに適用されます。

以下、その5つのCSSの機能を紹介します。

CSSのinterpolate-sizeプロパティとcalc-size()関数

CSSアニメーションは非常に優れていますが、通常は明示的なサイズ指定が必要で、auto, min-content, max-content, fit-contentのようなサイズ指定のキーワードでは使用できませんでした。

たとえば、アイコンをホバーした際に幅をスムーズにアニメーションさせるために下記のCSSを記述します。

widthプロパティをアニメーションさせるtransitionが設定され、:hoverwidth: max-content;が設定されているにも関わらず、アニメーションは機能しません。ホバーすると、突然変化します。
実際の動作は、デモページをご覧ください。

See the Pen
Growing buttons on hover (before)
by coliss (@coliss)
on CodePen.

しかし、interpolate-sizeプロパティの登場によって変わります。interpolate-sizeではこういったキーワードでは不可能だったアニメーションが可能になります。

使い方は簡単で、root要素にinterpolate-size: allow-keywords;を設定すると、ページ全体に適用されます。互換性が問題にならないのであれば、常にこれを設定しておくことをお勧めします。

interpolate-size: allow-keywords;が追加されたので、width: max-content;でもアニメーションは正常に機能します。
実際の動作は、デモページをChrome 129でご覧ください。

See the Pen
Growing buttons with interpolate-size: allow-keywords
by coliss (@coliss)
on CodePen.

CSSのcalc-size()関数はcalc()関数と同様に、サポートされているサイズ指定のキーワードの1つに対する操作をサポートします。レイアウト計算を実行するとき、sizeキーワードはcalc-size-basisの元のサイズに評価されます。

現在サポートされているサイズのキーワードは、auto, min-content, max-content, fit-contentです。将来サポートされる可能性のあるキーワードとしては、stretchcontainがあります。この関数はinterpolate-sizeプロパティで許可されるアニメーションの中間の値を表すために使用されます。

CSSのアンカーポジションのinset-areaをposition-areaに変更

CSSWGでは、このプロパティの名称をinset-areaからposition-areaに変更することを決定しました。Chrome 129ではposition-areaを採用しており、inset-areaは将来のリリースで削除される予定です。

CSSのアンカーポジション: ラップされていないinset-area()

inset-area()関数をposition-try-fallbacks内のinset-area値に置き換えます。たとえば、position-try-fallbacks:inset-area(top)の変わりに、position-try-fallbacks:topを使用します。

CSSのbackdrop-filterでちらつきがなくなります

CSSのbackdrop-filterプロパティは、要素の背景に1つ以上のフィルタを適用できます。背景とは、要素の背後にあるペイントされたコンテンツです。一般的なフィルタ効果はぼかしで、デザイナーはこのフィルタを使用して「磨りガラス」のダイアログボックスやナビゲーションのヘッダなどに半透明を作成します。

これは当初、通常のぼかしと同じ方法で実装されていましたが、要素の端を超えてサンプリングすると、端の色がにじんでしまうとう不具合がありました。その後、仕様が変更され、端のピクセルを複製して背景の端の外側のピクセルをサンプリングすることで解決しました。

しかし、コンテンツが背景の端に入るときに、ちらつきが発生します。最新の仕様変更では、端を超えてサンプリングするときに背景がミラーリングされるため、単一のカラーに重点を置くことなく、端に新しいカラーをスムーズに導入できるようになっています。

sponsors

top of page

©2024 coliss