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

Post on:2024年9月24日

はじめに

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を記述します。

nav a {
    width: 80px;
    overflow-x: clip;
    transition: width 0.35s ease;

    &:hover,
    &:focus-visible {
        width: max-content;
    }
}

nav a {

width: 80px;

overflow-x: clip;

transition: width 0.35s ease;

&:hover,

&:focus-visible {

width: max-content;

}

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

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

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

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

:root {
  interpolate-size: allow-keywords;
}

: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の元のサイズに評価されます。

nav a {
  width: 80px;
  overflow-x: clip;
  transition: width 0.35s ease;

  &:hover {
    width: calc-size(auto, size);
  }
}

nav a {

width: 80px;

overflow-x: clip;

transition: width 0.35s ease;

&:hover {

width: calc-size(auto, size);

}

現在サポートされているサイズのキーワードは、auto, min-content, max-content, fit-contentです。将来サポートされる可能性のあるキーワードとしては、stretchとcontainがあります。この関数は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つ以上のフィルタを適用できます。背景とは、要素の背後にあるペイントされたコンテンツです。一般的なフィルタ効果はぼかしで、デザイナーはこのフィルタを使用して「磨りガラス」のダイアログボックスやナビゲーションのヘッダなどに半透明を作成します。

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

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