【CSS】Chrome 117でリリースされるCSSプロパティ

はじめに

先日、Chrome 117がベータ版としてリリースされ、新たな6つのCSS機能が追加されました。

追加された6つの機能は以下の通りです。

• アットルール @starting-style
  • CSSトランジションの開始時のスタイルを指定するための新しいアットルールです。
• transition-behavior プロパティ
  • CSSトランジションの動作を制御するためのプロパティーです。
• overlay プロパティ
  • 最上位レイヤーでCSSトランジションが行われるようにするプロパティです。
• CSS grid の subgrid プロパティ
  • CSSグリッドのサブグリッドを制御するためのプロパティーです。
• text-wrap プロパティの値 pretty
  • テキスト折り返すためのプロパティにperttyが追加されました。
• contain-intrinsic-size プロパティの値 auto と none
  • content-visibilityのサイズを制御するcontain-intrinsic-sizeプロパティにautoとnoneの値が追加されました。

この記事では、これらのChrome 117でリリースされる新しいCSSプロパティーについて詳しく説明します。

アットルール @starting-style

アットルール @starting-styleは、CSSトランジションの開始時のスタイルを指定するための新しいアットルールです。

以下のようにすると、@starting-styleで、要素のトランジションが開始される際のスタイルを指定することができます。

/* .sample が読み込まれると opacity が０から１に変化する */
.sample {
  transition: opacity 1s;
  opacity: 1;
}

@starting-style {
  .sample {
    opacity: 0;
  }
}

サンプル

See the Pen @starting-style by でぐぅー | Qiita (@sp_degu) on CodePen.

transition-behaviorプロパティ

CSSトランジションの動作を制御するためのプロパティーです。

transition-behavior プロパティは、normal と allow-discrete の2つの値を指定できます。

• normal
  • 離散プロパティのトランディションは開始されず、補間可能なプロパティのみトランディションが開始される
• allow-discrete
  • 補間可能なプロパティだけでなく、離散プロパティもトランジションが開始される

※補間可能なプロパティ: opacity, color, margin etc.
※離散プロパティ: box-shadow, custom property, display, etc.

allow-discrete を使うとこんな感じのアニメーションになります。

ただ、display: none や content-visibility: hidden がトランディションされる場合は以下のように、トランディション中は visible の値になります。

サンプル

See the Pen starting-style by でぐぅー | Qiita (@sp_degu) on CodePen.

overlay プロパティ

overlay プロパティは、最上位レイヤーでCSSトランジションが行われるようにするためのプロパティです。

具体的には、overlayプロパティを使うことで、以下のように、最上位レイヤーから削除することと、CSSトランジションの順番が入れ替わります。

• 通常の場合
  1. 最上位レイヤーから削除される
  2. トランジションが行われる
• overlayが使われているの場合
  1. トランジションが行われる
  2. 最上位レイヤーから削除される

以下のようにすると、overlay プロパティを使うことができます。

[popover] {
  transition: overlay 1s allow-discrete;
}

サンプル

popover 1 を表示してから popover 2 を表示して、popover 2を非表示する

これをoverlayを使うのチェックボックスのON/OFFを切り替えて挙動の違いを確認するとイメージしやすいです。

See the Pen overlay transition by でぐぅー | Qiita (@sp_degu) on CodePen.

CSS Grid の subgrid プロパティ

CSS GridのSub Gridを制御するためのプロパティです。

CSS GridのSub Gridは、グリットアイテムの中の要素をサブグリットアイテムとして扱うことができ、サブグリットアイテムをグリットコンテナーのグリットに合わせて、レイアウトすることができる機能です。

詳しい紹介は、以前記事にしたので、こちらをこらんください。

サンプル

See the Pen サブグリット by でぐぅー | Qiita (@sp_degu) on CodePen.

text-wrap プロパティの値 pretty

perttyは、文末が1語にならないように文字が折り返される値になります。
ただperttyは、スピードやパフォーマンスよりもレイアウトに最適化した値を明示的に選ぶことになるので注意が必要です。

サンプル

See the Pen Bug Fixed 2 - Container Queries by でぐぅー | Qiita (@sp_degu) on CodePen.

contain-intrinsic-size プロパティの値 autoとnone

content-visibilityのサイズを制御するcontain-intrinsic-sizeプロパティにautoとnoneの値が追加されました。

まとめ

この記事では、Chrome117でリリースされる6つのCSSプロパティについて紹介しました。

現在は、Chrome Beta版でのみ利用可能ですが、これら6つのプロパティはとっても便利であると思います。
これらのプロパティが実用的になる日を楽しみにしています。

---

最後まで読んでくださってありがとうございます！

普段はデザインやフロントエンドを中心にQiitaに記事を投稿しているので、ぜひQiitaのフォローとX(Twitter)のフォローをお願いします。