CSSの新しい関数がすごく便利! Chrome 129で追加されたCSSの2つの新機能とアップデートされた3つの機能
Post on:2024年9月24日
これまではCSSアニメーションで幅や高さのサイズを変更する時は、明示的なサイズ指定が必要でした。width: auto;
やwidth: max-content;
のようなキーワードではCSSアニメーションは機能しませんでしたが、CSSの新しい関数によって可能になります。
Chrome 129では、calc()
に似た新しい関数calc-size()
、width: auto;
などのCSSアニメーションを可能にするinterpolate-size
プロパティ、さらにbackdrop-filter
プロパティの改善など、3つの機能もアップデートされました。
Web制作者は要チェックです!
New in Chrome 129
Chrome 129 beta
下記は各ポイントを意訳したものです。
※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。
- はじめに
- CSSのinterpolate-sizeプロパティとcalc-size()関数
- CSSのアンカーポジションのinset-areaをposition-areaに変更
- CSSのアンカーポジション: ラップされていないinset-area()
- CSSのbackdrop-filterでちらつきがなくなります
はじめに
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を記述します。
1 2 3 4 5 6 7 8 9 10 |
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;
を設定すると、ページ全体に適用されます。互換性が問題にならないのであれば、常にこれを設定しておくことをお勧めします。
1 2 3 |
: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
の元のサイズに評価されます。
1 2 3 4 5 6 7 8 9 |
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つ以上のフィルタを適用できます。背景とは、要素の背後にあるペイントされたコンテンツです。一般的なフィルタ効果はぼかしで、デザイナーはこのフィルタを使用して「磨りガラス」のダイアログボックスやナビゲーションのヘッダなどに半透明を作成します。
これは当初、通常のぼかしと同じ方法で実装されていましたが、要素の端を超えてサンプリングすると、端の色がにじんでしまうとう不具合がありました。その後、仕様が変更され、端のピクセルを複製して背景の端の外側のピクセルをサンプリングすることで解決しました。
しかし、コンテンツが背景の端に入るときに、ちらつきが発生します。最新の仕様変更では、端を超えてサンプリングするときに背景がミラーリングされるため、単一のカラーに重点を置くことなく、端に新しいカラーをスムーズに導入できるようになっています。
sponsors