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

## はじめに
先日、Chrome119がベータ版としてリリースされ、CSSに新たに4つアップデートがされました。

アップデートされた4つは以下の通りです。

+ **擬似クラス `:user-valid` ・ `:user-invalid`**
+ **相対カラー構文**
+ **`clip-path`プロパティの値 `<geometry-box>`**
+ **`clip-path`プロパティの値 `xywh()`　と　`rect()`**

この記事では、これらのChrome119としてリリースされた4つのCSSアップデートについて紹介します。

## 擬似クラス `:user-valid` ・ `:user-invalid`
### ⚪︎ `:user-valid`
`:user-valid` は、ユーザーがFormに入力した値が有効な値であった場合、スタイルを変更することができる擬似クラスです。

`:valid` は、ユーザーがフォームに入力している時にも値が有効かを判定しているのに対し、
`:user-valid`　は、ユーザーがフォームから移動した後に値が有効かを判定しています。

### ⚪︎ `:user-invalid`
`:user-invalid` は、ユーザーがFormに入力した値が無効な値であった場合、スタイルを変更することができる擬似クラスです。

`:invalid` は、ユーザーがフォームに入力している時にも値が無効かを判定しているのに対し、
`:user-invalid`　は、ユーザーがフォームから移動した後に値が有効かを判定しています。

### サンプル
以下のように指定することで、`:user-valid` ・ `:user-invalid`を適応することができます。

```sample.css
.sample:user-valid {
  border-color: #00ff00;
}

.sample:input:user-invalid {
  border-color: #ff0000;
}
```

<br />

実際に以下のサンプルに値を入力して、`:valid`・`:user-valid` と `:invalid`・`:user-invalid` の挙動の違いを確認してみてください。

:::note warn
以下のサンプルが正常に動作するためには、ブラウザがChrome119以上であることを確認してください。
:::

<p class="codepen" data-height="500" data-default-tab="result" data-slug-hash="vYbYBVb" data-editable="true" data-user="sp_degu" style="height: 500px; 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/vYbYBVb">
  icon-button-aria-label</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>


## 相対カラー構文
相対カラー構文は、特定の色を別の色へ派生させることができる構文です。

例えば以下の場合、 green( `rgb(0 , 125, 0)` )をRGB色空間に変換されそれを新しいRGBカラーとして利用できます。 

```sample.css
.sample {
    color: rgb(from green r g b / alpha); /* rgb(0, 125, 0 / 1)*/
}
```

この構文を使うことで、以下のようなことができます。

+ 他の色空間に変更することができる
    + 例： `hsl色空間` から `rgb色空間` へ変換
    + `rgb(from hsl(0, 50, 50) r g b)` → `rgb(191, 64, 64)` 
+ 特定の色だけを取り出せたり、入れ替えたりできる
    + 例： `rgb(0, 50, 50)` の gの色だけを取り出す
    + `rgb(from rgb(0, 50, 50) 0 g 0)` → `rgb(0, 50, 0)` 
    + 例： `rgb(0, 50, 50)` の aとgの色を入れ替える
    + `rgb(from rgb(0, 50, 50) g a b)` → `rgb(50, 0, 0)`
+ 色を計算させることできる
    + 例： `rgb(0, 50, 50)`の色を25%明るくする
    + `oklch(from rgb(0, 50, 50) calc(l + 25) c h)` → `oklch(28.7%, 12.25%, 194.769%)`

### サンプル
:::note warn
以下のサンプルが正常に動作するためには、ブラウザがChrome119以上であることを確認してください。
:::

<p class="codepen" data-height="400" data-default-tab="result" data-slug-hash="JjxjjpV" 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/JjxjjpV">
  Relative Color Syntax</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>


## `clip-path`プロパティの値 `<geometry-box>`
要素を任意の形で切り抜くことができる `clip-paht`に `<geometry-box>` の値を指定できるようになります。
`<geometry-box>` の値を指定することで、任意の参照ボックスを指定することができます。

`<geometry-box>`で指定できる値は以下の通りです。

+ `margin-box`
    + `margin-box`を参照ボックスとして使用できます
+ `border-box`
    + `border-box`を参照ボックスとして使用できます
+ `padding-box`
    + `padding-box`を参照ボックスとして使用できます
+ `content-box`
    + `content-box`を参照ボックスとして使用できます
+ `fill-box`
    + オブジェクトの境界ボックスを参照ボックスとして使用できます
+ `stroke-box`
    + ストロークの境界ボックスを参照ボックスとして使用できます
+ `view-box`
    + 最も近い SVG のビューポートを参照ボックスとして使用します

### サンプル
:::note warn
以下のサンプルが正常に動作するためには、ブラウザがChrome119以上であることを確認してください。
:::
<p class="codepen" data-height="500" data-default-tab="result" data-slug-hash="abXbbMr" data-editable="true" data-user="sp_degu" style="height: 500px; 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/abXbbMr">
  Relative Color Syntax</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>

## `clip-path`プロパティの値 `xywh()` と `rect()`
### ⚪︎ `xywh()`
`xywh()`は、要素を角丸長方形に切り抜くためのものです。
以下のように指定することで、長方形に切り抜くことができます。

```sample.css
/* xywh(x座標 y座標 幅 高さ round 角丸) */
.sample {
    clip-path: xywh(10px 10px 100px 100px round 10px);
}
```

### ⚪︎ `rect()`
`xywh()`は、要素を角丸長方形に切り抜くためのものです。
以下のように指定することで、長方形に切り抜くことができます。

```sample.css
/* xywh(x座標 y座標 幅 高さ round 角丸) */
.sample {
    clip-path: xywh(10px 10px 100px 100px round 10px);
}
```

### サンプル
:::note warn
以下のサンプルが正常に動作するためには、ブラウザがChrome119以上であることを確認してください。
:::
<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="OJdJPWz" data-editable="true" data-user="sp_degu" style="height: 300px; 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/OJdJPWz">
  clip-path: xywh() &amp; rect()</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>

## まとめ
この記事では、これらのChrome119でリリースされる4つのCSSアップデートについて紹介しました。

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

---

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

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

https://twitter.com/degudegu2510