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

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

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

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

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

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

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

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

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

### サンプル
<p class="codepen" data-height="400" data-default-tab="css,result" data-slug-hash="ZEVbqPo" data-editable="true" data-user="sp_degu" style="height: 400px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/sp_degu/pen/ZEVbqPo">
  @starting-style</a> by でぐぅー | Qiita (<a href="https://codepen.io/sp_degu">@sp_degu</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>


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

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

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

<font color="gray">*※[補間可能なプロパティ](https://drafts.csswg.org/css-values-4/#combining-values): opacity, color, margin etc.*</font>
<font color="gray">*※[離散プロパティ](https://drafts.csswg.org/web-animations-1/#animating-properties): box-shadow, custom property, display, etc.*</font>

`allow-discrete` を使うとこんな感じのアニメーションになります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/3609c772-5844-49a9-4c10-4298f9350cc6.png)


ただ、`display: none` や `content-visibility: hidden` がトランディションされる場合は以下のように、トランディション中は `visible` の値になります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/9d17cd2a-09aa-fdb2-db40-761224654f44.png)

### サンプル
<p class="codepen" data-height="400" data-default-tab="css,result" data-slug-hash="LYMpMQO" data-editable="true" data-user="sp_degu" style="height: 400px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/sp_degu/pen/LYMpMQO">
  starting-style</a> by でぐぅー | Qiita (<a href="https://codepen.io/sp_degu">@sp_degu</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>


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

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

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

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

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

### サンプル
> `popover 1` を表示してから `popover 2` を表示して、`popover 2`を非表示する

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

<p class="codepen" data-height="400" data-default-tab="css,result" data-slug-hash="eYbpPXK" data-editable="true" data-user="sp_degu" style="height: 400px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/sp_degu/pen/eYbpPXK">
  overlay transition</a> by でぐぅー | Qiita (<a href="https://codepen.io/sp_degu">@sp_degu</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>


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

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

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

https://qiita.com/degudegu2510/items/a28383fd334a976c7ad8

### サンプル
<p class="codepen" data-height="400" data-default-tab="css,result" data-slug-hash="mdaeoOr" data-editable="true" data-user="sp_degu" style="height: 400px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/sp_degu/pen/mdaeoOr">
  サブグリット</a> by でぐぅー | Qiita (<a href="https://codepen.io/sp_degu">@sp_degu</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

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

### サンプル
<p class="codepen" data-height="400" data-default-tab="css,result" data-slug-hash="GRPpeOm" data-editable="true" data-user="sp_degu" style="height: 400px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/sp_degu/pen/GRPpeOm">
  Bug Fixed 2 - Container Queries </a> by でぐぅー | Qiita (<a href="https://codepen.io/sp_degu">@sp_degu</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>


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

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

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

---

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

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

https://twitter.com/degudegu2510