CSSアニメーションの実装がこれで簡単に! Chrome 117でサポートされたCSSの6つの新しい機能とプロパティ

先週リリースされたChrome 117でサポートされた、CSSの6つの新しい機能とプロパティを紹介します。

今までのCSSでは不可能だったことやJavaScriptを使用しないとできなかったことが、数行のCSSで実装できるようになります。たとえば、アニメーションで変化する前のスタイルを設定したり、最上位レイヤーとの間で要素をアニメーションさせたり、本文テキストのレイアウトを自動で最適化したりできます。

Chrome 117でサポートされたCSSの6つの新しい機能とプロパティ

Chrome 117 beta

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

はじめに

Chrome 117でサポートされたCSSの新機能を使用することで、開始アニメーションと終了アニメーションを簡単に追加し、ダイアログやポップオーバーなどの最上位レイヤーの非表示要素との間でスムーズなアニメーションを実装できます。

@starting-styleルール

@starting-styleルールを使用すると、CSSのトランジションで変化する前のスタイルを適用することができます。

CSSのトランジションは要素の最初のスタイル更新時、またはdisplayタイプがnoneから他に変更された時に、初期スタイルからのトランジションをトリガーできませんでした。これは初期スタイルからの予期せぬ遷移を避けるためです。

トランジションで変化する前のスタイルを適用するには、@starting-styleルール内でスタイルを設定します。

たとえば、下記のCSSはdivの背景をライムグリーンにトランジションするCSSで、変化する前のスタイルを@starting-style内に設定します。

デモを表示すると、背景色がグリーンからライムに変化します。繰り返し表示したい場合は、下部の「Return」をクリックしてください。

See the Pen
@starting-style rule
by coliss (@coliss)
on CodePen.

参考:

overlayプロパティ

overlayプロパティは、終了時のトランジションのために要素を最上位レイヤーに維持することを可能します。overlayプロパティは要素が最上位レイヤーにあるかどうかを示すために追加され、noneautoの2つの値を取ることができます。

popoverdialogを最上位レイヤーからフェードアウトするには、トランジションのリストにoverlayプロパティを追加します。

See the Pen
overlay, dialog, popover, backdrop
by coliss (@coliss)
on CodePen.

参考:

transition-behaviorプロパティ

CSSのtransition-behaviorプロパティは、トランジションで個別のプロパティを使用できるようにするtransitionプロパティの省略形です。

transition-behaviorの値にallow-discreteを設定すると、個別プロパティはアニメーションを開始し、50%で初期値から最終値へと反転します。display: none;content-visibility: hidden;が初期値または最終値のいずれかであるトランジションでは、トランジションする間にわたってvisible値が使用されます。

複数の個別プロパティを簡単にアニメーション化できます。

See the Pen
Fade out cards - Transition
by coliss (@coliss)
on CodePen.

参考:

CSS Gridのsubgrid値

CSS Gridのsubgrid値が、grid-template-columnsgrid-template-rowsの2つで設定できるようになりました。この値により、ネストされたグリッドは行、列、またはその両方に対して新しいトラック定義を作成するのではなく、その親で定義されたトラックを使用することができます。

text-wrap: pretty;

text-wrapプロパティのpretty値は、スピードよりもレイアウトを最適化します。この値は本文テキストを目的としており、複数行にも対応しています。

prettyを使用することで、wrapよりも遅いレイアウト方法を明示的に選択することになり、パフォーマンスが最適化されます。Chromeの現在の実装では、段落の最後に1つの単語だけが表示されないよう孤立に対して最適化されています。

デモをこのページで見るとテキストがちょうど収まっているため変化がないかもしれません。右上「Edit on CodePen」で別タブで表示するとテキストのレイアウトを最適化できると思います。

See the Pen
text-wrap: pretty
by coliss (@coliss)
on CodePen.

contains-intrinsic-size: auto noneのサポート

既存のcontains-intrinsic-sizeプロパティの構文を拡張して、auto && noneもサポートします。

参考:

sponsors

top of page

©2023 coliss